Advanced Search

Google maps v3 - Infowindows from JSON feed using jQuery

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

Expand | Embed | Plain Text

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.