January 7, 2017

Show google map with multiple markers

You can use below code snippet to show Google map with multiple markers.

<style>
   
#map_wrapper
    {
       
height: 205px
;
       
width: 298px
;
    }

   
#map_canvas

    {
       
width: 100%
;
       
height: 100%
;
    }
    
input[type=file]
{
       
color:transparent
;
    }
</style
>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initialize" async="async" defer="defer"></script>
<script>

   
function initialize() {
       
var
map;
       
var bounds = new
google.maps.LatLngBounds();
       
var
mapOptions = {
            mapTypeId:
'roadmap'

        };

        map =
new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);

       
var
markers = [
            [
'Marker1, Delhi'
, 24.524235, 77.165726],
            [
'Marker2, Delhi'
, 25.556695, 77.125543]
        ];

       
var
infoWindowContent = [
            [
'<div class="info">'
+
           
'<h3>DATA1</h3>'
+
           
'<p>PARA1</p>' + '</div>'
],
            [
'<div class="info">'
+
           
'<h3>DATA2</h3>'
+
           
'<p>PARA2</p>'
+
           
'</div>'
]
        ];

       
var infoWindow = new
google.maps.InfoWindow(), marker, i;

       
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]
            });

            google.maps.event.addListener(marker,
'click', (function
(marker, i) {
               
return function
() {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            map.fitBounds(bounds);
        }

       
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function
(event) {
           
this
.setZoom(12);
            google.maps.event.removeListener(boundsListener);
        });

    }
</script
>

<div id="map_wrapper" class="map">

      <div id="map_canvas" class="mapping"></div>

</div>

 

No comments:

Post a Comment