Google maps v3 - Infowindows from JSON feed using jQuery


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $(document).ready(function()
  2. {
  3.  
  4.  
  5. var infowindow = new google.maps.InfoWindow({
  6.  
  7. content: ''
  8.  
  9. });
  10.  
  11.  
  12. function doMarker(inlatlng, desc)
  13. {
  14. var marker = new google.maps.Marker({map: map, position: inlatlng, clickable: true});
  15.  
  16. marker.info = new google.maps.InfoWindow({
  17. content: desc
  18. });
  19.  
  20. google.maps.event.addListener(marker, 'click', function() {
  21.  
  22. infowindow.close()
  23. infowindow.setContent(desc);
  24. infowindow.open(map, marker);
  25.  
  26.  
  27. })
  28.  
  29. return marker;
  30. }
  31.  
  32.  
  33. var mapOptions = {
  34. mapTypeId: google.maps.MapTypeId.ROADMAP,
  35. streetViewControl: false,
  36. mapTypeControl: false
  37. };
  38.  
  39. map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  40.  
  41. var bounds = new google.maps.LatLngBounds();
  42.  
  43. $.getJSON('URL OF API FUNCTION', function(data)
  44. {
  45. for (var i = 0; i < data.length; i++)
  46. {
  47. if (data[i].latlng != null)
  48. {
  49.  
  50. var strlatlng = data[i].latlng;
  51. if (strlatlng != "")
  52. {
  53. if (strlatlng.indexOf(',') > 0)
  54. {
  55. var arrlatlng = strlatlng.split(',');
  56. var latlng = new google.maps.LatLng(parseFloat(arrlatlng[0]),parseFloat(arrlatlng[1]));
  57. var name = data[i].title;
  58. var teaser = data[i].teaser;
  59. var thumbsrc = data[i].thumbsrc;
  60. var link = data[i].url;
  61. var marker1 = doMarker(latlng, '<div id="myInfoWindow" style="width: 250px;"><h3><a href="' + link + '">' + name + '</a></h3><img src="' + thumbsrc + '" title="' + name + '"<p>' + teaser + '</p></div>')
  62.  
  63. marker1.setMap(map);
  64.  
  65.  
  66.  
  67. bounds.extend(latlng);
  68. }
  69. }
  70. }
  71. }
  72.  
  73.  
  74. map.fitBounds(bounds);
  75. });
  76.  
  77. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.