Styled maps allow you to customize or change the style of the standard Google base maps, changing the user interface of such elements as roads, parks, and built-up areas etc.
For api key sign up here:
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
After you sign up, use the following script tag:
<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&sensor=false”></script>
because in live website you will need to include an API key.
For map options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
<?php
$addr = urlencode("211, APC Road, Shyam Bazar, Kolkata");
$xmlstr = file_get_contents("http://maps.googleapis.com/maps/api/geocode/xml?address=$addr&sensor=false");
$xmlarr = new SimpleXMLElement($xmlstr);
$lat = $xmlarr->result->geometry->location->lat;
$lng = $xmlarr->result->geometry->location->lng;
?>
<!DOCTYPE html>
<html>
<head>
<title>Styled Google Map</title>
<style type="text/css">
#map {
width: 1000px;
height: 445px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', init);
function init() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>),
styles: [
{"featureType":"all","elementType":"geometry","stylers":[{"color":"#5a8385"}]},
{"featureType":"all","elementType":"labels.text.fill","stylers":[{"gamma":0.05},{"lightness":25}]},
{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"saturation":-30},{"lightness":-35},{"weight":3},{"gamma":0.9}]},
{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
{"featureType":"landscape","elementType":"geometry","stylers":[{"lightness":35},{"saturation":35}]},
{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":25}]},
{"featureType":"poi.park","elementType":"geometry","stylers":[{"lightness":25},{"saturation":-25}]},
{"featureType":"road","elementType":"geometry","stylers":[{"lightness":15},{"saturation":-35}]},
{"featureType":"road","elementType":"geometry.stroke","stylers":[{"saturation":30},{"lightness":30}]},
{"featureType":"water","elementType":"all","stylers":[{"lightness":-25}]}
]
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>),
map: map,
title: 'Styled Google Map!'
});
}
</script>
</head>
<body>
<h1>Styled Google Map</h1>
<div id="map"></div>
</body>
</html>
An author of Namaste UI, published several articles focused on blogging, business, web design & development, e-commerce, finance, health, lifestyle, marketing, social media, SEO, travel.
For any types of queries, contact us on info[at]namasteui.com.