papplo
4/7/2016 - 4:23 PM

Gmaps with multiple markers and info box

Gmaps with multiple markers and info box

Gmaps with multiple markers and info box
content_copyfile_download
<script type="text/javascript">

function initialized() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
                     
    // Display a map on the page with div id show_map_div
    map = new google.maps.Map(document.getElementById("show_map_div"), mapOptions);
    map.setTilt(45);
         
    // Multiple Markers - name,lat,long values
    var markers = [
                    ["Jawahar Circle",26.8392,75.8003],
                    ["Birla Mandir",26.8931,75.8153]
                  ];
      //alert(markers);                  
    // Information Window To show content on markers
    var markers_info_content = [
                ['<div class="info_content">' +
        '<h3 style="display:block">Jawahar Circle</h3><strong style="display:block;text-transform:capitalize;">Location : Jawahar Circle, Jaipur</strong>' +
        '<p>Lorem Ipsum is simply dummy text of the printing and type setting industry...</p>' + '</div>'],
              ['<div class="info_content">' +
        '<h3 style="display:block">Birla Mandir</h3><strong style="display:block;text-transform:capitalize;">Location :  Birla Mandir, Jaipur</strong>' +
        '<p>Lorem Ipsum is simply dummy text of the printing and type setting industry...</p>' + '</div>']
          ];
         
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
     
    var pinColor = "18cecf"; //color of the markers
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
     
    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
         
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
                 marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
             
        });
          
         
        // Allow each marker to have an information content box
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(markers_info_content[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
 
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
 
    // Set the zoom level as per your requirement currently it is 12
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(12);
        google.maps.event.removeListener(boundsListener);
    });
     
}
 
</script>


// Dont forget to call source 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

// Appartently manually calling gmaps need initializing
<body onLoad="initialized()">