Google Map

Google Map with marker and events.

by Amitesh Kumar

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="geo-error">Your current device/IP location loaded</div>
<div id="map-canvas"></div>

CSS

#map-canvas {
      height: 300px;
      width: 100%
  }
  #geo-error {
      height: 50px;
      width: 100%;
      color:red;
      background-color:yellow;
      margin-bottom:10px;
  }

JavaScript

debugger;
var myLatLng, otherLocations;
navigator.geolocation.getCurrentPosition(

function (position) {
    myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    otherLocations = getOtherLocations();
    initializeMap();
}, function (error) {
    document.getElementById('geo-error').innerHTML = "Loading hardcoded loc as geolocation failed with error code: " + error.code;
    myLatLng = new google.maps.LatLng(22.57265, 88.36389);
    otherLocations = getOtherLocations();
    initializeMap();
});

function getOtherLocations() {
    return [
    ['Garia', 22.464895, 88.395309], ['North Dum Dum', 22.635402, 88.405609], ['south Dum Dum', 22.610762, 88.399429]];
}

function initializeMap() {

    var mapOptions = {
        zoom: 10,
        center: myLatLng
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    setDefaultMarkers(map, myLatLng);
    setMarkers(map, otherLocations);
}

function setDefaultMarkers(map) {
    //var GeoMarker = new GeolocationMarker(map);
    //var myCircle = {
    //    path: google.maps.SymbolPath.CIRCLE,
    //    fillColor: '#4285f4',
    //   fillOpacity: 0.35,
    //    scale: 50,
    //    strokeColor: '#4285f4',
    //     strokeWeight: 2
    // };
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        //icon: myCircle,
        icon: {
            path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
            scale: 4
        },
        title: 'Your location',
        draggable: true
    });
    var circleOption = {
        strokeColor: '#4285f4',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#4285f4',
        fillOpacity: 0.35,
        map: map,
        center: myLatLng,
        radius: 5 * 1609.344
    };
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle(circleOption);
    google.maps.event.addListener(marker, 'dragend', function () {
    ...