Guest User

google map api

a guest
Feb 12th, 2017
238
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.43 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.   <title>Google Maps Multiple Markers</title>
  6.   <script src="http://maps.google.com/maps/api/js?sensor=false"
  7.          type="text/javascript"></script>
  8. </head>
  9. <body>
  10.   <div id="map" style="width: 1366 px; height: 768px;"></div>
  11.  
  12.   <script type="text/javascript">
  13.     var locations = [
  14.       ['Akshay autoshop<br/>contact:', 11.255684, 75.779135, 4],
  15.       ['autoshop<br/>contact:', 11.255816, 75.780331, 5],
  16.       ['autoshop<br/>contact:', 11.257063, 75.779682, 3],
  17.       ['autoshop<br/>contact:', 11.256105, 75.778035, 2],
  18.       ['autoshop<br/>contact:', 11.255212, 75.779906, 1]
  19.     ];
  20.  
  21.     var map = new google.maps.Map(document.getElementById('map'), {
  22.       zoom: 10,
  23.       center: new google.maps.LatLng(11.255802,75.6707243),
  24.       mapTypeId: google.maps.MapTypeId.ROADMAP
  25.     });
  26.  
  27.     var infowindow = new google.maps.InfoWindow();
  28.  
  29.     var marker, i;
  30.  
  31.     for (i = 0; i < locations.length; i++) {
  32.      marker = new google.maps.Marker({
  33.        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  34.        map: map
  35.      });
  36.  
  37.      google.maps.event.addListener(marker, 'click', (function(marker, i) {
  38.        return function() {
  39.          infowindow.setContent(locations[i][0]);
  40.          infowindow.open(map, marker);
  41.        }
  42.      })(marker, i));
  43.    }
  44.  </script>
  45. </body>
  46. </html>
Add Comment
Please, Sign In to add comment