Customizing Google Maps
Wall Script
Follow Me:
Monday, October 07, 2013

Customizing Google Maps

Do you know Google is providing an awesome feature, that you can create a totally customizable personalized Google Maps for your website based on theme colors. Today I want to explain how to customize and style Google Map from the scratch, just very few lines of code, this helps you to enrich your website design.

Customizing Google Maps


Download Script     Live Demo

Default Google Map
Just modify the Latitude and Longitude values, click here to the live demo
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(Latitude_Value, Longitude_Value);

function initialize()
{
var mapOptions = {
zoom: 8,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>

Adding Styles
Google Map styling structure.
styles:[
{
    "featureType": "transit.station.rail",
    "stylers": [
         { "visibility": "on" },
         { "invert_lightness": true },
         { "color": "#808080" },
         { "weight": 0.1 },
         { "saturation": 1 },
         { "lightness": 1 },
         { "gamma": 1 }
      ]
},
{
....
}
]

Customizing Google Maps
Styling the Google Map.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);

function initialize()
{
var mapOptions = {
backgroundColor: "#ffffff", // background color
zoom: 8, // map zoom position
disableDefaultUI: true,
draggable: false,
scrollwheel: false,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//----------- Styles Start----------
styles: [
{
   "featureType": "landscape.natural",
   "elementType": "geometry.fill",
   "stylers": [
   { "color": "#ffffff" }
    ]
},
{
   "featureType": "landscape.man_made",
   "stylers": [
   { "color": "#ffffff" },
   { "visibility": "off" }
   ]
},
{
   "featureType": "water",
   "stylers": [
   { "color": "#80C8E5" },  // applying map water color
   { "saturation": 0 }
   ]
},
{
   "featureType": "road.arterial",
   "elementType": "geometry",
   "stylers": [
   { "color": "#999999" }
    ]
}
,{
   "elementType": "labels.text.stroke",
   "stylers": [
   { "visibility": "off" }
  ]
}
,{
   "elementType": "labels.text",
   "stylers": [
   { "color": "#333333" }
   ]
}
,{
   "featureType": "poi",
   "stylers": [
   { "visibility": "off" }
   ]
}
]
//------------Styles End--------------
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>

Styled Wizard
Create Google map styles using Styled Maps Wizard.

Add Marker
Adding custom marker icon.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);

var markers = [];
var image = new google.maps.MarkerImage( '9lessons.png', // icon
new google.maps.Size(84,56), // icon dimensions width and height in pixels 
new google.maps.Point(0,0),
new google.maps.Point(42,56)
);

function addMarker()
{
markers.push(new google.maps.Marker({
position: mapCoordinates,
raiseOnDrag: false,
icon: image,
map: map,
draggable: false
}));
}

function initialize()
{
var mapOptions = {
.......
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
addMarker(); // calling function
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


31 comments:

  1. we know where to find you now 3:)

    ReplyDelete
  2. Indeed it is great. I tried this few times but failed. Thanks.

    ReplyDelete
  3. been using that one last year i used google api

    ReplyDelete
  4. Thankyou Srinivas!
    That's what I've been looking for.

    ReplyDelete
  5. Admin,
    Please,i want a tutorial on how to integrate google map of a particular city with street or google map with countries on a website

    ReplyDelete
  6. Grt. Do we need to have an API key and secret ID if we want to use this in our classified portal for our users and advertisers? As I am seeing you have not used that. So what is your say on this?

    ReplyDelete
  7. Great post thanks Srinivas..

    ReplyDelete
  8. There is no zoom in and zoom out functionality.....otherwise it is perfect!!!

    ReplyDelete
  9. Thanks for the nice post.. going too add it in my site
    http://t2lead.in

    Thanks again

    ReplyDelete
  10. Which wireframing tool you used wireframig.

    ReplyDelete
  11. excelent, good explanation, thanks men.

    ReplyDelete
  12. Não consegui ver o 'Live Demo', o link está com problemas
    I could not see the 'Live Demo', the link has problems
    मैं 'लाइव डेमो' नहीं देख सकता था, कड़ी मुसीबत में है

    ReplyDelete
  13. Não consegui acessar o 'Download Script', o link está quebrado!
    Unable to access the 'Download Script', the link is broken!
    'डाउनलोड स्क्रिप्ट' का उपयोग करने में असमर्थ, लिंक टूट गया है!

    ReplyDelete
  14. please give an example using php mysql and google map.

    ReplyDelete
  15. very well posted. thanks. will try though it seems a bit tough for me.

    ReplyDelete
  16. It's really amazing with lot of stuffs,
    well done, thanks

    ReplyDelete
  17. Excellent tutorial Srinivas . I tried to implement this tutorial and it worked liked a charm . Thanks for sharing the codes with us .

    ReplyDelete
  18. using this code i changed Latitude and Longitude but no result shown what i need to do ?

    ReplyDelete
  19. Can you show how to make map responsive ?

    ReplyDelete
  20. thanks for sharing this amazing post.
    this is really helpful one...!!

    ReplyDelete
  21. Very useful , can you show how to add 2 or more markers(locations) ?
    Regards.

    ReplyDelete
  22. it's free for commercial using or google maps charge for it

    ReplyDelete
  23. Great post so useful article thank you sir.

    ReplyDelete
  24. Great Post! Very helpful! But i have one question: how do I add another maker?
    Would be great if you could publish a solution.

    ReplyDelete
  25. how to add more locations like example this >
    var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    ReplyDelete

Make in India