970_90

Thursday, 17 July 2014

Google Map Integration Add InfoWindow in Marker

Many Web application show the locations on Google map like list of Hotels, Hostels, Origin & Destination in form of marker

When we click on these markers a small popup window open, that describe about that location. Its very useful functionality of Google map because we can can't show the address in Google map but we can show the Marker in Google map. 

We can show lot of markers with different categories and also these markers can be customized, means we can show our custom image instead of Google Marker. Also can do lot of animation with marker.

We can add rich text in the info popup window. means you can do bold, italic, text align and add images. You can put full address with images in the info box.


<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
    /** Add lat/lng of your location **/
    var myCenter3=new google.maps.LatLng(51.508742,-0.120850);

    function initialize3()
    {
        var mapProp3 = {
            center:myCenter3,
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        var map3=new google.maps.Map(document.getElementById("googleMapId3"),mapProp3);

        var marker3=new google.maps.Marker({
            position:myCenter3
        });

        marker3.setMap(map3);

        var infowindow = new google.maps.InfoWindow({
            content:"We are <b>web technology experts</b>, You can also add images here."
        });
        
        infowindow.open(map3,marker3);
    }
    google.maps.event.addDomListener(window, 'load', initialize3);
</script>
<div id="googleMapId3" style="height: 300px; width: 650px;">
</div>


1 comment:

  1. Thanks a lot, I was stuck with some undefined error, but your script is very simple and understandable. Really helpful

    ReplyDelete