Databases
StackOverflow2013
Postsdbo
PODisplay multiple Markers on google map api v3 from $.each loop
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay multiple Markers on google map api v3 from $.each loop
    text
    copied!<p>I'm trying to get multiple markers on a Google map using API V3. The marker I want to show is a pink square named beachflag.png. When my program gets to the setMarkers function the values inside the arrays created in the $.each loop are lost. The alert function displays undefined. I don't see how this is possible because I've declared this arrays at the beginning of the script (global). However, when the for loop at the bottom that iterates through the location array it has only one value. All the values I pushed into the arrays(location, lat, and elong) are gone. I have been following an example from google sample api for v3(https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=fr-FR) and it is not working for me. here is my live test page: <a href="http://leobee.com/otakufinder/" rel="nofollow"> otakufinder</a></p> <pre><code>var userLat=""; var userLong=""; var map; var eventsLat=[]; var eventsLong=[]; locations=[]; var i=0; jQuery(window).ready(function(){ jQuery("#btnInit").click(initiate_geolocation); }); function initiate_geolocation() { //watch position navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors); } function handle_errors(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("user did not share geolocation data"); break; case error.POSITION_UNAVAILABLE: alert("could not detect current position"); break; case error.TIMEOUT: alert("retrieving position timed out"); break; default: alert("unknown error"); break; } } function handle_geolocation_query(position){ userLat=position.coords.latitude; userLong=position.coords.longitude; var userLocation = new google.maps.LatLng(userLat, userLong); var mapOptions = { zoom: 8, center: userLocation, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); var marker= new google.maps.Marker({ position: new google.maps.LatLng(userLat, userLong), title: "Hello Testing", clickable: true, map: map }); var numRand = Math.floor(Math.random()*1000) $.get('http://leobee.com/otakufinder/scripts/geoloco.php?userLat='+userLat+'&amp;userLong='+userLong+'&amp;randNum='+numRand, function (data){ var jsontext = data; var contact = JSON.parse(jsontext); $.each(contact , function() { $('#otakuEvents').append( '&lt;div&gt;' + this.event_name + '&lt;/div&gt;&lt;div&gt;' + this.lat +" "+this.elong + '&lt;/div&gt;' );// end div eventsLat.push(this.lat); eventsLong.push(this.elong); locations.push(this.event_name); });// end .each setMarkers(map,locations); function setMarkers(map, locations) { alert (" in setMarkers function "+ eventsLat[i]);//output undefined var image = new google.maps.MarkerImage('images/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var shadow = new google.maps.MarkerImage('../images/beachflag.png', new google.maps.Size(37, 32), new google.maps.Point(0,0), new google.maps.Point(0, 32)); var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; for (var i = 0; i &lt; locations.length; i++) { alert (" inside for loop "+ eventsLat[i]);// output has only one variable init var myLatLng = new google.maps.LatLng(eventLat[i], eventLong[i]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, }); } } }// end data callback );// end getJson } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload