A lot of websites use google maps to show their location, but they usually leave it with the default style.

This post gives you the code I use to generate a map and shows you how to style it.

It also shows you how to add a custom map pin icon.

If you are looking for how to style the popup infowindow, check out my other blog post

Here is the code for the map with a style I created using this Styled Maps Wizard

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps Javascript API example | codeshare by Paul Seal</title>

<style>
#googleMap { width: 100%; height: 400px; top: 0; left: 0; right: 0; bottom: 0; }
</style>
</head>
<body>

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {

//replace this variable with the json you generate in the google maps api wizard tool
//Styles Start
var styles = [ { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "saturation": "-100" }, { "lightness": "57" } ] }, { "featureType": "poi", "elementType": "geometry.stroke", "stylers": [ { "lightness": "1" } ] }, { "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit.station.bus", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "transit.station.bus", "elementType": "labels.text.fill", "stylers": [ { "saturation": "0" }, { "lightness": "0" }, { "gamma": "1.00" }, { "weight": "1" } ] }, { "featureType": "transit.station.bus", "elementType": "labels.icon", "stylers": [ { "saturation": "-100" }, { "weight": "1" }, { "lightness": "0" } ] }, { "featureType": "transit.station.rail", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "transit.station.rail", "elementType": "labels.text.fill", "stylers": [ { "gamma": "1" }, { "lightness": "40" } ] }, { "featureType": "transit.station.rail", "elementType": "labels.icon", "stylers": [ { "saturation": "-100" }, { "lightness": "30" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#d2d2d2" }, { "visibility": "on" } ] } ];
//Styles End

//Create a styled map using the above styles
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});

var mapProp = {
center:new google.maps.LatLng(52.922592, -1.474605),//set the centre of the map. In my case it is the same as the position of the map pin.
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

//Set the map to use the styled map
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

//Create a marker pin to add to the map
var marker;
marker = new google.maps.Marker({
position: new google.maps.LatLng(52.922592, -1.474605),//set the position of the pin
map: map,
title: "Derby",
icon: "/images/blue-pin.png", //if you comment this out or delete it you will get the default pin icon.
animation:google.maps.Animation.DROP
});
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

<!-- Map goes in the div below -->
<div id="googleMap"></div>

</body>
</html>

You just need to get the json output from the map wizard and paste it over the value of my style variable. Then choose your own map pin icon and enter the path for it where I have put the icon path inside the marker.

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

About the author

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Related Posts

How to include scripts from partial views in MVC and Umbraco

This post will show you how you can include scripts from inside an MVC partial view rather than havi…

Read Post

How to get the swagger JSON file from a Web API

If you need to know the url to get the swagger json file, then this is the post for you.

Read Post

What is Visual Studio Live Share and how do you use it?

This post shows you how to get set up to start using Visual Studio Live Share for remote pair progra…

Read Post

How to create a Carousel in Umbraco using Nested Content and Bootstrap

This post will show you how to build a carousel in umbraco using Nested Content and Bootstrap

Read Post