Search the Community
Showing results for tags 'google maps api3'.
Found 3 results
-
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>
-
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. -
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>