Jump to content

Search the Community

Showing results for tags 'google maps'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 11 results

  1. I got the code below from W3Schools tutorial on Google maps. I also received an API code from google. When I try to put this on my site I get an error message in what looks like an iframe. I think I am suppose to do something additional with my api code. Google had me set a project name and then just generated a code. I don't know if I am suppose to do something besides generate that code in order for it to work for the specific map I want on my site. Can anyone tell me something obivous I am doing wrong or something that I still need to do on google? <script> function myMap() { var mapProp= { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARr9stC0XnoFmg2DEqjj5U8sTC_nkvg0A&q&callback=myMap"></script> <iframe width="450" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?AIzaSyARr9stC0XnoFmg2DEqjj5U8sTC_nkvg0A&q=Wayne+State+University" allowfullscreen> </iframe>
  2. lease see my code below, I have sorted out all my coding to work how I want it too, but for some reason I just can't get it to load the map when you open it up in a browser. Can anyone see where I have gone wrong and guide me to get it work please. Thank you. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title>County Polygons + Markers w/elapsed time</title> <script src="../fiveenglishcounties.js" charset="UTF-8"> // positioning codes © Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk </script> <script type="text/javascript"> var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin; $('#controls input[name="[counties]"]').click(function(){ var poly = pollies[this.value]; if(poly.map){ poly.infowindow.close(); poly.setMap(null); this.checked = false; } else { poly.setMap(map); this.checked = true; } }); function elapsed(rfd) { var rs = (new Date().getTime() - rfd.getTime()) / 1000, days = Math.floor(rs / 86400), hours = Math.floor((rs - (days * 86400 )) / 3600), minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60), secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))), fet = secs + 's'; if(minutes){fet = minutes + 'm' + ' ' + fet;} if(hours){fet = hours + 'h' + ' ' + fet;} if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;} return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago'; } function createMarker(latlng, html, map) { var ref = $.trim($('#reference').val()), infowindow = new google.maps.InfoWindow({ content: ref || html }), marker = new google.maps.Marker({ map: map, time : new Date(), position: latlng, html: html, icon: defaultPin, infowindow: infowindow }), $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>'); $tm.get(0).selectedIndex = 0; marker.addListener('mouseover', function() { clearInterval(infowindow.timer); infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content).fadeIn(); infowindow.timer = setInterval(function(){ infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content); }, 300); infowindow.open(map, this); }); marker.addListener('mouseout', function() { clearInterval(infowindow.timer); infowindow.close(); $('#supplementwindow').fadeOut(); }); marker.addListener('click', function() { var oe = this.optel; $tm.get(0).selectedIndex = $('option', $tm).index(oe); $tm.trigger('change'); }); marker.optel = $('option', $tm).last(); $tm.get(0).size = $('option', $tm).length; markers.push(marker); } $('#formcont form').submit(function(e){ var addresses = $('.address', this); addresses = [addresses.eq(0).val(), addresses.eq(1).val()]; addresses.forEach(function(address, refnum) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map, refnum); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); e.preventDefault(); }); $('#activatemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setIcon(pinImage); return false; } }); }); $('#removemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setMap(null); markers.splice(idx, 1); return false; } }); $o.remove(); bounds = new google.maps.LatLngBounds(); if(markers.length){ $.each(markers, function(i, v){ bounds.extend(v.position); }); map.fitBounds(bounds); } if(markers.length < 2){ map.setZoom(markers.length? 13 : 8); } tm.get(0).size = $('option', tm).length; }); $('#themarkers').change(function(){ this.title = this.options[this.options.selectedIndex].title; var i = this.value; if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ map.setCenter(v.position); map.setZoom(10); return false; } }); this.size = $('option', $(this)).length; }); $('#showall').click(function(){ $('#themarkers').get(0).selectedIndex = 0; if(!markers.length){ map.setCenter(new google.maps.LatLng(52.178227, -0.46013)); map.setZoom(8); return; } map.fitBounds(bounds); if(markers.length === 1){ map.setZoom(8); } }); function formatCodes(codeString){ var a = codeString.split(' '), l = a.length, po; while(--l > -1){ po = a[l].split(','); a[l] = {lat: +po[1], lng: +po[0]}; } return a;} function initMap() { pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor); defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor); var p; geocoder = new google.maps.Geocoder(); bounds = new google.maps.LatLngBounds(); map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 52.178227, lng: -0.4013}, mapTypeId: google.maps.MapTypeId.ROADMAP }); pollies = { Bedfordshire: { paths: BedfordshireCodes, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.15, latlng: {lat: 52.002974, lng: -0.465139} }, Bedford: { paths: BedfordCodes, strokeColor: '#FFC0CB', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FFC0CB', fillOpacity: 0.15, latlng: {lat: 52.135973, lng: -0.466655} }, Hertfordshire: { paths: HertfordshireCodes, strokeColor: '#FFFF55', strokeOpacity: 0.9, strokeWeight: 2, fillColor: '#FFFF55', fillOpacity: 0.25, latlng: {lat: 51.809782, lng: -0.237674} }, Cambridgeshire: { paths: CambridgeshireCodes, strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.15, latlng: {lat: 52.305297, lng: 0.021820} }, Northamptonshire: { paths: NorthamptonshireCodes, strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.15, latlng: {lat: 52.272994, lng: -0.875552} } }; for(p in pollies){ var polly = pollies[p]; polly.paths = formatCodes(polly.paths); polly = pollies[p] = new google.maps.Polygon(polly); polly.infowindow = new google.maps.InfoWindow({ content: p, position: polly.latlng }); polly.addListener('click', function(){ if(this.infowindow.map){ this.infowindow.close(); } else { this.infowindow.open(map, this); } }); polly.setMap(map); } } function initialize() { } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px"> <h1 align="center">Map Search</h1> <div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" > <form> <br> Location 1 <input type="text" class="address"> <br> <br> Location 2 <input type="text" class="address"> <br> <br> Reference <input type="text" id="reference"> <br> <br> <input type="submit" value="Submit"> </form> </div> <div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"> <label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br> <label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br> <label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br> <label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br> <label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label> </div> <div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option> </select><br> <input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br> <input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br> <input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker"> </div> </div> <div id="map"></div> <div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div> </body> </html>
  3. I am trying to embed some kml files for local county bodries but am not sure how to asign multiple ones as I am coding in dreamweaver. Also I have made a drop down menu for eack kml file but am not sure how to link and get it all to work, mainly want the boundries to be shown on the map at all times and when selected in the dropdown menu, that particular county is shown on the map. Please see my coding I have done, and if there is any advice i would appreciate it. I am completely new to this and trying to teach myself. var kmlUrl = 'maps/central bedfordshire' ; var kmlOptions = { suppressInfoWindows: true, preserveViewport: false, map: map }; var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); function countiesDropdown(container){ var counties = { "bedfordshire", "hertfordshire", "cambridgeshire", "northamptonshire", "buckinghamshire" } var out = "<select><option value=""></option>";</select> <select> for (var key in counties) {</select> <select> out += "<option value="" + key + "">" + counties[key] + "</option>";</select> <select> }</select> <select> out += "</select>"; console.log(out); document.getElementById(container).innerHTML = out; } I have already inbeded the general map and markers etc and they work fine hence why have only given the coding that isn't working. Here is the HTML part. <div id="menu" style=" position: absolute; margin: 45px 80px;" > <select id="Counties"> <option value="">Select County</option> <option value="bedfordshire">Bedfordshire</option> <option value="buckinghamshire">Buckinghamshire</option> <option value="cambridgeshire">Cambridgeshire</option> <option value="hertfordshire">Hertfordshire</option> <option value="northamptonshire">Northamptonshire</option> </select> </div> Hope this enough of an understanding of what i have and am trying to do.
  4. Im am trying to assign the function of my dropdown menu so when you click on the selected county it will focue on that countie. I have written out what I can below, through research as I am new to all this, but am not sure how to link it all together. I know I haven't got the googlemaps attached but I do in my full page, it is just this section i am having trouble in trying to link together. <!doctype html> <html> <head> <script type="text/javascript"> document.getElementById('counties').addEventListener('click', function(e) {alert(this.value); e.preventDefault();}, false); $('bedfordshire').click(function(){ alert(this.value); }); $('buckinghamshire').click(function(){ alert(this.value); }); $('cambridgeshire').click(function(){ alert(this.value); }); $('hertfordshire').click(function(){ alert(this.value); }); $('northamptonshire').click(function(){ alert(this.value); }); //bedfordshire bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.33, -0.05)); bounds.extend(new google.maps.LatLng(51.8, -0.8)); map.fitBounds(bounds); //buckinghamshire bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.21, -0.33)); bounds.extend(new google.maps.LatLng(51.47, -1.33)); map.fitBounds(bounds); //cambridgeshire bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.75, -0.55)); bounds.extend(new google.maps.LatLng(51.99, -0.53)); map.fitBounds(bounds); //hertfordshire bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.09, -0.35)); bounds.extend(new google.maps.LatLng(51.59, -0.80)); map.fitBounds(bounds); //northamptonshire bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(52.67, -0.33)); bounds.extend(new google.maps.LatLng(51.94, -1.35)); map.fitBounds(bounds); </script> </head> <body> <select id="Counties" > <option value="">Select County</option> <option value="bedfordshire">Bedfordshire</option> <option value="buckinghamshire">Buckinghamshire</option> <option value="cambridgeshire">Cambridgeshire</option> <option value="hertfordshire">Hertfordshire</option> <option value="northamptonshire">Northamptonshire</option> </select> </body> </html>
  5. I am trying to allow a user to input their own info in to their place make, say a reference number for example, but am struggling to do so. I believe the way for this is a regular counter loop, but i am not sure how and where to put it and even if that is the right thing to do. Can anyone help me with this please. The code below is what I have done so far. <!DOCTYPE html> <html> <head> <style type="text/css"> #supplementwindow { display: none; position: absolute; left: 10px; top: 10px; } </style> <!-- Google Maps and Places API --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var markers = []; function createMarker(latlng, html, map) { var infowindow = new google.maps.InfoWindow({ content: html }); var marker = new google.maps.Marker({ map: map, position: latlng }); marker.addListener('mouseover', function() { infowindow.open(map, this); $('#supplementwindow').html(latlng + '<br>' + html).fadeIn(); }); marker.addListener('mouseout', function() { infowindow.close(); $('#supplementwindow').fadeOut(); }); markers.push(marker); } //declare namespace var up206b = {}; //declare map var map; function trace(message) { if (typeof console != 'undefined') { console.log(message); } } up206b.initialize = function() { var latlng = new google.maps.LatLng(52.136436, -0.460739); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); up206b.geocode(); } var geocoder = new google.maps.Geocoder(); up206b.geocode = function() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; var bounds = new google.maps.LatLngBounds(); var addresses = [$('#address').val(), $('#address2').val()]; addresses.forEach(function(address) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); } </script> </head> <body onload="up206b.initialize()"> <div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;"> <h1 align="center">Map Search</h1> <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" > <form > <br> Location 1 <input type="text" id="address"> <br> <br> Location 2 <input type="text" id="address2"> <br> <br> <input type="button" value="Submit" onClick="up206b.geocode()"> </form> </div> </div> <div id="map_canvas" style="height: 500px; width: 500px; float:right"></div> <div id="supplementwindow"></div> </body> </html>
  6. RE: http://www.w3schools.com/googleapi/google_maps_basic.asp <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html> In the above example, the container's size is controlled with style="width:500px;height:380px;" Substituting 100% in place of 500px, the width of the map can effectively be altered; however, the same is not true for the height of the map. Why is this true, and how else might its height be controlled without an explicit dimension in pixels?
  7. So I have code for a google map window. However I am having trouble figuring out how to make a generic google marker appear on my Long and Lat location. The <div id> tag is at the bottom of the page and I want to figure out how to center it in the page. My second question is how to indent the first line of the first paragraph. this is my Google Map Code: <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(41.652589,-91.532774), zoom:18, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); var myLatlng = new google.maps.LatLng(41.652589,-91.532774); var marker = new google.maps.Marker({ position: myLatlng, map: map, }); </script> <div id="googleMap" style="width:500px;height:380px;">
  8. Dear all. I am planning to embed a google map into a PHP script. The script retrieves data from a MySQL DB into the map. All sources I have come across so far demand the use of XML as an intermediary between MySQL and the map. There is the possibility of writing the map page as a PHP file and outputting JS for markers to be created in the map, but this is claimed to be more problematic method. Is there an easier way to achieve the above without XML or JS?
  9. I am in the process of creating a website for a new venture but i am SOOOOO rusty on codeing as havent done it in over 10 years and was never very good with anything more than html i am after someone willing to help me create the site i could afford a few pennies if need be but this project is being set up on a very tight budget it will all be centered around maps i need to have the facility to click a location on the map and it opens up alongside all the details of the business, but not in a new page just within a frame on the same page i also need a site search facility i have been trying to get the map to work in a package for days and now at the end of my teather i have used the following code which works as a stand alone but not into the current template i have been using by 123-reg <a><html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Complex icons</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> function initialize() { var mapOptions = { zoom: 5, center: new google.maps.LatLng(51.5000, 0.1167) } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); setMarkers(map, beaches);} var beaches = [ ['Marmalade <br> 67 Northgate Street <br> Chester <br> CH1 2HQ <br><a href="http://www.marmalade-chester.co.uk">l</a></a>', 53.19384783026191, -2.8605856895446, 4], ['southend', 51.60592667798674, 0.66912150382994, 5], ['tarporley', 55.74326998205062, -2.8699998855590, 3], ['Manly Beach', 51.180229348841784, -1.82709896564483, 2], ['stonehenge', 51.180229348841784, -1.82709896564483, 1] ]; function setMarkers(map, locations) { var image = { url: 'images/foodsmall.png', size: new google.maps.Size(30, 30), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(0, 32) }; var shape = { coords: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var beach = locations; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image, shape: shape, title: beach[0], zIndex: beach[3] }); }}google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html></locations></br></br></br></br></script></meta></meta> Any help would be greatly appricated i am basically trying to creat a site similar to the following one if that helps http://www.visiteatstay.com/
  10. I made an update query that generates a google maps url link in a hyperlink type column based on the address in other columns. When I click on the generated link it works and opens my browser to the address in google maps but after I close & reopen access it doesn't work anymore even after using the query again, it acts like normal text but the url is underlined and the pointy finger shows. I'm guessing the function that determines if a string is a url is looking at the code instead of the result of the code . I am using access 2007 btw. UPDATE Property SET Property.Notes = "https://maps.google.com/maps?q="+Replace(Nz([Park Address],"Address")," ","+")+",+"+Replace(Nz([Park City],"City")," ","+")+",+"+Replace(Nz([Park State],"State")," ","+")+",+"+Replace(Nz([Park Zip],"")," ","+");
  11. Hej, i don't understandt, why, this dosent work, i am trying to make an factory to add locations to my map, but i am new to the google maps API, and not thatb adv. in JavaScript. i know that if it had bin an c# function it will work. hope sombody can help, and sorry for my pure spelling skills, function calcLatLng(adresse) { var Local = new google.maps.LatLng; geocoder.geocode({ 'address': adresse }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { Local = results[0].geometry.location; console.log(Local); //this log the corect result, } else { } });// if i make an 'console.log' here only gets a empty 'google.maps.LatLng' object return Local;}function addNewPlace(info, icon, adresse, title) { var marker = new google.maps.Marker({ map: map, position: calcLatLng(adresse), // but here i only gets a 'undefind' title: title, icon: icon }); var infowindow = new google.maps.InfoWindow({ content: info }); infowindow.open(map, marker);}
×
×
  • Create New...