javascript - How do I combine two or more overlays in Google Maps API-v3 -
i have created 2 separate files run individually. 1 loads google map drop down icons once click "drop turbines" box. other file loads google map , draws ring radius 20 miles. when try , combine 2 either 1 works or whole thing hangs. can help. new programming. combined code shown below runs google map , draws circle drop down icons not appear.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>circlesmarker animations <code>settimeout()</code></title> <style> html, body, #map-canvas { height: 750px; width: 1010px; margin-left: 120px; margin-top: 20px; padding: 0px } #panel { position: absolute; width 100px; height 25px; top: 65px; left: 68%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> var placemap = {}; placemap['fenton'] = { center: new google.maps.latlng(53.047687, -0.688523), population: 120 }; var placecircle; var locations = [ new google.maps.latlng(53.044680, -0.675398), new google.maps.latlng(53.049159, -0.670971), new google.maps.latlng(53.054110, -0.664277), new google.maps.latlng(53.057157, -0.660745), new google.maps.latlng(53.056767, -0.655040), new google.maps.latlng(53.053591, -0.660949), new google.maps.latlng(53.050765, -0.660348), new google.maps.latlng(53.047681, -0.659188), new google.maps.latlng(53.043154, -0.654878), new google.maps.latlng(53.043695, -0.659211), new google.maps.latlng(53.044508, -0.662924), new google.maps.latlng(53.046134, -0.666785), new google.maps.latlng(53.049939, -0.665885), new google.maps.latlng(53.014957, -0.678112), new google.maps.latlng(53.018575, -0.679691), new google.maps.latlng(53.014892, -0.669833), new google.maps.latlng(53.018428, -0.674398), new google.maps.latlng(53.013147, -0.684684), new google.maps.latlng(53.048850, -0.790458), new google.maps.latlng(53.039768, -0.806422), new google.maps.latlng(53.036749, -0.807216), new google.maps.latlng(52.981730, -0.630449) ]; var tmarkers = [ 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/paleblue_markera.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbinepaleblue.png', 'googlemapsmarkers/google maps markers/windturbineorange.png', 'googlemapsmarkers/google maps markers/windturbineorange.png', 'googlemapsmarkers/google maps markers/windturbineorange.png', 'googlemapsmarkers/google maps markers/windturbineorange.png', 'googlemapsmarkers/google maps markers/orange_markerb.png', 'googlemapsmarkers/google maps markers/windturbinemagenta.png', 'googlemapsmarkers/google maps markers/windturbinemagenta.png', 'googlemapsmarkers/google maps markers/purple_markerc.png', 'googlemapsmarkers/google maps markers/red_markerd.png' ]; var iterator = 0; var pumplane = new google.maps.latlng(53.047687, -0.688523); function initialize() { //create map. var mapoptions = { zoom: 10, center: new google.maps.latlng(53.047687, -0.688523), maptypeid: google.maps.maptypeid.road }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); // construct circle each value in placemap. (var place in placemap) { var placeoptions = { strokecolor: '#ff0000', strokeopacity: 0.5, strokeweight: 1.0, fillcolor: '#cc99cc', fillopacity: 0.1, map: map, center: placemap[place].center, radius: 32187 }; //add circle place map. placecircle = new google.maps.circle(placeoptions); } var mapoptions = { zoom: 10, center: pumplane }; map = google.maps.map(document.getelementbyid('map-canvas'), mapoptions); } function init2() { var mapoptions = { zoom: 10, center: pumplane }; map = google.maps.map(document.getelementbyid('map-canvas'), mapoptions); } function drop() { (var = 0; < locations.length; i++) { settimeout(function() { addmarker(); }, * 500); } } function addmarker() { markers.push(new google.maps.marker({ position: locations [iterator], map: map, icon: tmarkers [iterator], draggable: false, animation: google.maps.animation.drop })); iterator++; } //var pumplane = new google.maps.latlng(53.047687, -0.688523); //var markers = []; //var map; //var image1ba = 'googlemapsmarkers/google maps markers/blue_markera.png'; google.maps.event.adddomlistener(window, 'load', initialize); // </script> </head> <body> <div id="panel" style="margin-left: -52px"> <button id="drop" onclick="drop()">drop turbines</button> </div> <div id="map-canvas"></div> </body> </html>
you have obvious javascript errors (markers undefined, map local initialize function). removed unused init2 function.
working code snippet:
// define global markers array var markers = []; // define global map variable var map = null; var placemap = {}; placemap['fenton'] = { center: new google.maps.latlng(53.047687, -0.688523), population: 120 }; var placecircle; var locations = [ new google.maps.latlng(53.044680, -0.675398), new google.maps.latlng(53.049159, -0.670971), new google.maps.latlng(53.054110, -0.664277), new google.maps.latlng(53.057157, -0.660745), new google.maps.latlng(53.056767, -0.655040), new google.maps.latlng(53.053591, -0.660949), new google.maps.latlng(53.050765, -0.660348), new google.maps.latlng(53.047681, -0.659188), new google.maps.latlng(53.043154, -0.654878), new google.maps.latlng(53.043695, -0.659211), new google.maps.latlng(53.044508, -0.662924), new google.maps.latlng(53.046134, -0.666785), new google.maps.latlng(53.049939, -0.665885), new google.maps.latlng(53.014957, -0.678112), new google.maps.latlng(53.018575, -0.679691), new google.maps.latlng(53.014892, -0.669833), new google.maps.latlng(53.018428, -0.674398), new google.maps.latlng(53.013147, -0.684684), new google.maps.latlng(53.048850, -0.790458), new google.maps.latlng(53.039768, -0.806422), new google.maps.latlng(53.036749, -0.807216), new google.maps.latlng(52.981730, -0.630449)]; var tmarkers = [ 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/blue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/lightblue.png', 'http://maps.google.com/mapfiles/ms/icons/orange.png', 'http://maps.google.com/mapfiles/ms/icons/orange.png', 'http://maps.google.com/mapfiles/ms/icons/orange.png', 'http://maps.google.com/mapfiles/ms/icons/orange.png', 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', 'http://maps.google.com/mapfiles/ms/icons/purple.png', 'http://maps.google.com/mapfiles/ms/icons/purple.png', 'http://maps.google.com/mapfiles/ms/icons/yellow.png', 'http://maps.google.com/mapfiles/ms/icons/green.png']; var iterator = 0; var pumplane = new google.maps.latlng(53.047687, -0.688523); function initialize() { //create map. var mapoptions = { zoom: 10, center: new google.maps.latlng(53.047687, -0.688523), maptypeid: google.maps.maptypeid.road }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); // construct circle each value in placemap. (var place in placemap) { var placeoptions = { strokecolor: '#ff0000', strokeopacity: 0.5, strokeweight: 1.0, fillcolor: '#cc99cc', fillopacity: 0.1, map: map, center: placemap[place].center, radius: 32187 }; //add circle place map. placecircle = new google.maps.circle(placeoptions); } var mapoptions = { zoom: 10, center: pumplane }; map = google.maps.map(document.getelementbyid('map-canvas'), mapoptions); } function drop() { (var = 0; < locations.length; i++) { settimeout(function () { addmarker(); }, * 500); } } function addmarker() { markers.push(new google.maps.marker({ position: locations[iterator], map: map, icon: tmarkers[iterator], draggable: false, animation: google.maps.animation.drop })); iterator++; } //var pumplane = new google.maps.latlng(53.047687, -0.688523); //var markers = []; //var map; //var image1ba = 'googlemapsmarkers/google maps markers/blue_markera.png'; google.maps.event.adddomlistener(window, 'load', initialize);html, body, #map-canvas { height: 100%; width: 100%; margin-left: 0px; margin-top: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="panel" style="margin-left: 0px"> <button id="drop" onclick="drop()">drop turbines</button> </div> <div id="map-canvas"></div>
Comments
Post a Comment