Google Map

Mark Location

by B L Praveen

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="map"></div>

CSS

#map {
     height: 500px;
     width: 500px;
 }

JavaScript

jQuery(document).ready(function () {
    var map;
    var centerPosition = new google.maps.LatLng(55.693571472077004, -97.24609375);
    var options = {
        zoom: 4,
        center: centerPosition,
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions: {
         style: google.maps.ZoomControlStyle.SMALL
        }
       
    };
    map = new google.maps.Map($('#map')[0], options);
    var image = {
        url: 'https://dl.dropboxusercontent.com/u/814783/fiddle/marker.png',
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(12, 59)
    };    
    markers = new google.maps.Marker({
        position: centerPosition,
        map: map,
        icon: image
    });
     var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(markers, 'click', function() {
         infoWindow.setContent('Content');
         infoWindow.open(map, this);
    });    
 });