Advanced Search

Full Google maps

/ Published in: JavaScript
Save to your folder(s)
A complete Google maps example with multiple markers and infowindows

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. var network = [];
  3. network.push({title:"{title}",address:"<div class='infowindow'><h3>{title}</h3>{network_street}<br/> - {network_zip} {network_city}<br/>{network_country}<a href='{network_url}'>{network_url}</a></div>",lat:{network_lat},lng:{network_lng}});
  4. </script>
  5. //////////////////////////////
  6. var map,markers=[],bounds,infowindow;
  7. function initialize() {
  8. 	var myLatlng = new google.maps.LatLng(51.05866,3.713379);
  9. 	var myOptions = {
  10. 		zoom: 8,
  11. 		center: myLatlng,
  12. 		streetViewControl: false,
  13. 		scrollwheel:false,
  14.         mapTypeId: google.maps.MapTypeId.ROADMAP  
  15. 	}
  16. 	map = new google.maps.Map(document.getElementById("gmap"), myOptions);
  17.         infowindow = new google.maps.InfoWindow();
  18.     bounds = new google.maps.LatLngBounds();
  19.     mapReady();
  20. }
  21. function mapReady() {
  22.     for(var i=0;i<network.length;i++){
  23.         addPoint(network[i]);
  24.     }
  25.     map.setCenter( bounds.getCenter(), map.fitBounds(bounds));
  26. }
  27. function addPoint(data) { 
  28.     var point = new google.maps.LatLng(data.lat,data.lng);
  29.     var marker = new google.maps.Marker({
  30.         position: point,
  31.         map: map,
  32.         title: data.title
  33.     });
  34.     markers.push(marker);
  35.     bounds.extend(point);
  36.  
  37.     google.maps.event.addListener(marker, 'click', function() {
  38.       infowindow.open(map,marker);
  39.       infowindow.setContent(data.address);
  40.     });
  41. }
  42. function loadScript() {
  43. 	var script = document.createElement("script");
  44. 	script.type = "text/javascript";
  45. 	script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  46. 	document.body.appendChild(script);
  47. }
  48. window.onload = loadScript;

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.