Return to Snippet

Revision: 52124
at October 13, 2011 22:15 by Boldlight


Updated Code
$(document).ready(function()
{


var infowindow = new google.maps.InfoWindow({

 content: ''

});


function doMarker(inlatlng, desc)
{
	var marker = new google.maps.Marker({map: map, position: inlatlng, clickable: true});

	marker.info = new google.maps.InfoWindow({
	  	content: desc
	});
							
	google.maps.event.addListener(marker, 'click', function() {

	infowindow.close()
    infowindow.setContent(desc);
    infowindow.open(map, marker);


	})

	return marker;
}


var mapOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			streetViewControl: false,
			mapTypeControl: false
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		
	var bounds = new google.maps.LatLngBounds();

		$.getJSON('URL OF API FUNCTION', function(data)
		{	
			for (var i = 0; i < data.length; i++)
			{
				if (data[i].latlng != null)
				{

					var strlatlng = data[i].latlng;
					if (strlatlng != "")
					{
						if (strlatlng.indexOf(',') > 0)
						{
							var arrlatlng = strlatlng.split(',');
							var latlng = new google.maps.LatLng(parseFloat(arrlatlng[0]),parseFloat(arrlatlng[1]));
							var name = data[i].title;
							var teaser = data[i].teaser;
							var thumbsrc = data[i].thumbsrc;
							var link = data[i].url;
							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>')

							marker1.setMap(map);							


							
							bounds.extend(latlng);
						}
					}
				}
			}
			
								
		map.fitBounds(bounds);
		});

});

Revision: 52123
at October 13, 2011 22:13 by Boldlight


Initial Code
$(document).ready(function()
{


var infowindow = new google.maps.InfoWindow({

 content: ''

});


function doMarker(inlatlng, desc)
{
	var marker = new google.maps.Marker({map: map, position: inlatlng, clickable: true});

	marker.info = new google.maps.InfoWindow({
	  	content: desc
	});
							
	google.maps.event.addListener(marker, 'click', function() {

	infowindow.close()
    infowindow.setContent(desc);
    infowindow.open(map, marker);


	})

	return marker;
}


var mapOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			streetViewControl: false,
			mapTypeControl: false
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		
	var bounds = new google.maps.LatLngBounds();

		$.getJSON('URL OF API FUNCTION', function(data)
		{	
			for (var i = 0; i < data.length; i++)
			{
				if (data[i].latlng != null)
				{

					var strlatlng = data[i].latlng;
					if (strlatlng != "")
					{
						if (strlatlng.indexOf(',') > 0)
						{
							var arrlatlng = strlatlng.split(',');
							var latlng = new google.maps.LatLng(parseFloat(arrlatlng[0]),parseFloat(arrlatlng[1]));
							var name = data[i].title;
							var teaser = data[i].teaser;
							var thumbsrc = data[i].thumbsrc;
							var link = data[i].url;
							var marker1 = doMarker(latlng, '<div id="sealifeInfoWindow" style="width: 250px;"><h3><a href="' + link + '">' + name + '</a></h3><img src="' + thumbsrc + '" title="' + name + '"<p>' + teaser + '</p></div>')

							marker1.setMap(map);							


							
							bounds.extend(latlng);
						}
					}
				}
			}
			
								
		map.fitBounds(bounds);
		});

});

Initial URL


Initial Description


Initial Title
Google maps v3 - Infowindows from JSON feed using jQuery

Initial Tags
google

Initial Language
jQuery