Friday, 12 April 2013

How to use Google Maps with marker in ASP.NET, MVC

Copy-paste this code

<script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>


<h2>MAPS</h2>
<div id="map_canvas" style="height: 400px; width:100%;"></div>

<script language="javascript" type="text/javascript">
    var map;
    var mgr;

    function initialize() {
        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(26.32849908419746, 73.11118125915527),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        mgr = new MarkerManager(map);
        var infoWindow = new google.maps.InfoWindow({ content: "SmartSign" });
        google.maps.event.addListener(mgr, 'loaded', function () {

        
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(26.32849908419746, 73.11118125915527),
                    html: "Om Prakash Bishnoi, House No : 83, Bheru Nagar, Banaar Road, Jodhpur, Rajasthan"
                });

                google.maps.event.addListener(marker, "click", function () {
                    infoWindow.setContent(this.html);
                    infoWindow.open(map, this);
                });
                mgr.addMarker(marker, 0);
            mgr.refresh();
        });
    }
    $(document).ready(function () {
        initialize();
    });
</script>