Google maps javascript API example with a styled map and custom pin icon
23 Oct 2015
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.
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.
Proudly sponsored by
Moriyama
- Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.
AppVeyor
- CI/CD service for Windows, Linux and macOS
- Build, test, deploy your apps faster, on any platform.
elmah.io
- elmah.io is the easy error logging and uptime monitoring service for .NET.
- Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete
- uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.
uSkinned
- More than a theme for Umbraco CMS, take full control of your content and design with a feature-rich, award-nominated & content editor focused website platform.
UmbHost
- Affordable, Geo-Redundant, Umbraco hosting which gives back to the community by sponsoring an Umbraco Open Source Developer with each hosting package sold.