Google map / Gmap


gmap style
https://developers.google.com/maps/documentation/javascript/styling
 http://www.hongkiat.com/blog/google-maps-styles/

<div id="map_canvas"></div>




JS
===========
var marker;
function initialize() {
   /* var styles = [
        {
            featureType: 'water', // set the water color
            elementType: 'geometry.fill', // apply the color only to the fill
            stylers: [
                { color: '#ffffff' }
            ]
        },{
            featureType: 'landscape.natural', // set the natural landscape
            elementType: 'all',
            stylers: [
                { hue: '#f8f8f8' },
                { lightness: 0 }
            ]
        }
        ,{
            featureType: 'poi', // set the point of interest
            elementType: 'geometry',
            stylers: [
                { hue: '#f1f1f1' },
                { saturation: -100 },
                { lightness: 10 }
            ]
        },
        {
            featureType: 'road', // set the road
            elementType: 'geometry',
            stylers: [
                { hue: '#d5c18c' },
                { saturation: -100 },
                { lightness: 20 }
            ]
        },
        {
            featureType: 'road.local', // set the local road
            elementType: 'all',
            stylers: [
                { hue: '#ffffff' },
                { saturation: -200 },
                { lightness: 0 }
            ]
        }
    ];*/

    var styles = [{
        stylers: [
            { hue: '#f8f8f8' },
            { saturation: -100 },
            { lightness: 70 }
        ]
    }];

    var latlng = new google.maps.LatLng(-37.8375439, 144.9929183);
    var settings = {
        zoom: 15,
        center: latlng,
        mapTypeControl: true,
        scrollwheel: false,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: styles
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

    //marker
    var indicator = new google.maps.MarkerImage(directory_url+'/images/map-pointer.png',
        new google.maps.Size(26,43),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 43)
    );
    var iconImage = {
        url: directory_url+'/images/map-pointer.png'
    };

    var companyPos = new google.maps.LatLng(-37.8375439, 144.9929183);
    marker = new google.maps.Marker({
        position: companyPos,
        map: map,
        icon: iconImage,
        title:"Suite 910, 9 Yarra St, South Yarra, VIC 3141, Australia"
    });

    // company address marker
    var companyLogo = new google.maps.MarkerImage(directory_url+'/images/webalive-address.png',
        new google.maps.Size(429,160),
        new google.maps.Point(0,0),
        new google.maps.Point(215, 0)
    );
    var companyMarker = new google.maps.Marker({
        position: companyPos,
        map: map,
        icon: companyLogo,
        draggable:true
    });

    var address_image_url = directory_url+'/images/webalive-address.png';
    var contentString = '<div id="content"><img src="'+address_image_url+'"/></div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
        //infowindow.open(map,marker);  //Open the info window
    });
    //google.maps.event.addListener(marker, 'click', toggleBounce);
}

/*function toggleBounce() {

    if (marker.getAnimation() != null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
        //marker.setAnimation(google.maps.Animation.DROP);
    }
}*/

google.maps.event.addDomListener(window, 'load', initialize);