Skip to main content

Create Google Maps with Multiple Markers and infowindow

Creating Google maps in web page using Google API is as simple as drinking a cup of coffee. Markers are the pinpoints that point the symbolic representation of the given address. Info window is a type of popup that displays some data like address or location when the Marker are clicked. In the below code you can view the implementation of google maps for given locations.



JavaScript and HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <style type="text/css">
        html,
        body,
        #pane{
            height: 500px;
            width: 500px;
            margin: 0px;
            padding: 0px;
        }
    </style>

    <script type="text/javascript">
        function geocodeAddress(locations, i) {
            var address = locations[i][0];
            geocoder.geocode({
                'address': locations[i][0]
            },

            function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: title,
                        animation: google.maps.Animation.DROP,
                        address: address,
                        url: url
                    })
                    infoWindow(marker, map, address);
                    bounds.extend(marker.getPosition());
                    map.fitBounds(bounds);
                } else {
                    alert("geocode of " + address + " failed:" + status);
                }
            });
        }

        var locations = [
              ['New York, NY'],
              ['Newark, NJ'],
              ['Philadelphia, PA']
        ];

        var geocoder;
        var map;
        var bounds = new google.maps.LatLngBounds();

        function initialize() {
            map = new google.maps.Map(
              document.getElementById("pane"), {
                  center: new google.maps.LatLng(37.4419, -122.1419),
                  zoom: 13,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              });
            geocoder = new google.maps.Geocoder();

            for (i = 0; i < locations.length; i++) {
                geocodeAddress(locations, i);
            }
        }
        google.maps.event.addDomListener(window, "load", initialize);

        function geocodeAddress(locations, i) {
            var address = locations[i][0];
            geocoder.geocode({
                'address': locations[i][0]
            },

              function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                      var marker = new google.maps.Marker({
                          map: map,
                          position: results[0].geometry.location,
                          animation: google.maps.Animation.DROP,
                          address: address,
                         })
                      infoWindow(marker, map, address);
                      bounds.extend(marker.getPosition());
                      map.fitBounds(bounds);
                  } else {
                      alert("geocode of " + address + " failed:" + status);
                  }
              });
        }

        function infoWindow(marker, map, address) {
            google.maps.event.addListener(marker, 'click', function () {
                var html = "<div>" + address + "<br></div></p></div>";
                iw = new google.maps.InfoWindow({
                    content: html,
                    maxWidth: 350
                });
                iw.open(map, marker);
            });
        }

        function createMarker(results) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                animation: google.maps.Animation.DROP,
                address: address,
                })
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
            infoWindow(marker, map, address);
            return marker;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div id="pane" style="border: 2px solid #3872ac;"></div>
    </form>
</body>
</html>

Reactions:

Comments

Post a Comment