Tuesday 3 January 2017

How to create customize google map with custom image marker, icon and multiple infowindow.

var markers = [
 {
        "title": 'SPAIN',
        "lat": '39.90973623',
        "lng": '-2.63671875',
        "description": 'Spain,(US Embassy, Puerto Banus, Youth Council Spain, British International School of Marbella)'
    },
];
    window.onload = function () {
        LoadMap();
    }
    function LoadMap() {
  var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 2,
            scrollwheel: false,
     minZoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var iconBase = 'http://example.com/';
        var infoWindow = new google.maps.InfoWindow();

        for (var i = 0; i < markers.length; i++) {
            var data = markers[i];
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                icon: iconBase + 'image.png'
            });

            //Attach click event to the marker.
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                    infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }

---------------------------------------------------------------------------------
<div id="dvMap" style="width: 1230px; height: 450px;"></div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

No comments:

Post a Comment