58054

How to define multiple locations Using Google Maps API to drop pin for every post in a list of posts

Question:

This question might be answered in other posts, but I haven't found the specific answer and I'm having trouble discerning how to logically think through this. I have a site where each post has an address. On each post page I've used the Google Maps API to translate the address into a map location and to show a map with a pin at that address. Works great.

What I need to do now is to show a map at the top of my archive/category/etc pages (pages with a list of posts generated by a query and a loop) and to list a pin for every post that shows up in that particular query. I also need the map to automatically resize to show all of the pins, and not show extraneous map outside of the pins boundaries.

The way it seems that this would happen is that I could create the markers with a script that's inside the loop, so that each time the loop runs, it would generate a new marker and add it to the map.

Another possible method that seems like it has potential would be to add the location to an array for each turn of the loop, and then show the array of pins when the loop is done.

Can anyone give me some advice on how to accomplish this? At this point I'm using the following code which gives me a map and the location of the last post in the list generated by the loop. This code is outside of the loop. I need to know which part I should move inside the loop, and how to adjust it so that I won't simply rewrite the marker during every iteration of the loop.

<script type="text/javascript"> function initialize() { geocoder = new google.maps.Geocoder(); var mapOptions = { zoom: 3, } var myAddress = document.getElementById('theAddress'); var address = myAddress.textContent; geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script>

Answer1:

You need to add markers in a loop. this was taken from a project i was working.

var locations = ["Denver, CO, United States"]; var markers = []; var iterator = 0; for (var i = 0; i < locations.length; i++) { setTimeout(function() { geocoder.geocode({'address': locations[iterator]}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, animation: google.maps.Animation.DROP }); bounds.extend(marker.getPosition()); map.fitBounds(bounds); } else { log('Geocode was not successful for the following reason: ' + status); } }); iterator++; }, i * 250); }

Recommend

  • Email SAS html output
  • C#: Decoding JPEG images with 12-bit precision using Silverlight FJCore library?
  • iterparse fails to parse a field, while other similar ones are fine
  • Remove previous Directions Route Google Maps
  • Failed to find version-tag string. File must be updated
  • Alamofire and Reachability.swift not working on xCode8-beta5
  • How to make R's read_csv2() recognise the text characters properly
  • SetWindowsHookEx does not react on media keys
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • ViewController With Transparent Background Entering Current ViewController With Push Transition
  • Mysterious problem with floating point in LISP - time axis generation
  • How to know when stdin is empty if it contains EOF?
  • DomPDF {PAGE_NUM} not on first page
  • CSS Linear-gradient formatting issue accross different browsers
  • Javascript simulate pressing enter in input box
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Is my CUDA kernel really runs on device or is being mistekenly executed by host in emulation?
  • Problems to linebreak with an int in JLabel
  • swift auto completion not working in Xcode6-Beta
  • Excel - Autoshape get it's name from cell (value)
  • Controls, properties, events and timers running in design time
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Does CUDA 5 support STL or THRUST inside the device code?
  • Perl system calls when running as another user using sudo
  • Updated Ionic CLI but shows previous version (Windows)
  • Importing jscolor library in angular 2
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • Comma separated Values
  • A cron job substitute?
  • Error creating VM instance in Google Compute Engine
  • Hits per day in Google Big Query
  • -fvisibility=hidden not passed by compiler for Debug builds
  • Why joiner is not used after Sequence generator or Update statergy
  • how does django model after text[] in postgresql [duplicate]
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How can I remove ASP.NET Designer.cs files?
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • Reading document lines to the user (python)
  • Android Heatmap on canvas or ImageView