Revision: 52124
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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
Initial Language
jQuery