Full Google maps


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

A complete Google maps example with multiple markers and infowindows


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.