Home » Google Map » Customizable Google Map

Customizable Google Map

There are many common API that we use on our website. Google Map is one of them. Actually, in every website, we can see a Google map. There is no problem in using a Google map because typing an address in Google map will give you the iframe code that you can paste to your site and use the map easily. But what if you want to customize the map internally or what if you want to use the map for a dynamic link that you can change every time you wish without generating an API key every time. Now we will add a map to our site that will be customized easily.

Step: 1

We have to use the Google map API script to add on our page. We can put the link like below.

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>

 

Step: 2

Now we have to add some script to add a location and generate it. We will take our address in a variable so we can change it every time we want. Now we will take the address for convert it to geocode. Geocode converts a physical address to a latitude and longitude variable. So, we have to use the geocode method to access the map position.

var geocoder = new google.maps.Geocoder();

var address = “New York”;

geocoder.geocode( { ‘address’: address}, function(results, status) {

//code goes here

});

 

Step: 3

We will now check that we have entered a valid address. If it ok then we will convert it to latitude and longitude by the code below. All the code we will edit after the “//code goes here” section.

if (status == google.maps.GeocoderStatus.OK) {

var latitude = parseFloat(results[0].geometry.location.lat());

var longitude = parseFloat(results[0].geometry.location.lng());

}

 

Step: 4

After converting the address to latitude and longitude, we have to determine the position and then we will select which kind of map we want to use. There are many modes in a map roadmap, satellite, hybrid, terrain, custom_style etc. All those can be chosen by the code below.


var map;

var myposition = new google.maps.LatLng(latitude, longitude);

var MY_MAPTYPE_ID = ‘roadmap’;//ROADMAP,SATELLITE,HYBRID,TERRAIN,custom_style

 

 

Step: 5

We are almost done in our process. We have to initialize the map and customize it in our own way. We can add image marker, color, custom pop up, custom HTML and much more. We have to add the code below the step: 4 portions.

function initialize() {

var featureOpts = [

{

stylers: [

{ hue: ‘#b9bf74’ },

{ visibility: ‘simplified’ },

{ gamma: 0 },

{ weight: 0 },

{ saturation: -20 },

{ lightness: -20 },

]

},

{

elementType: ‘labels’,

stylers: [

{ visibility: ‘on’ },

{ color: ‘#ffffff’ }

]

},

{

featureType: ‘road’,

stylers: [

{ color: ‘#ffffff’ }

]

},

{

featureType: ‘water’,

stylers: [

{ color: ‘#0baef7’ }

]

}

];

var mapOptions = {

zoom: 18,

center: myposition,

scrollwheel: true,

navigationControl: true,

scaleControl: true,

draggable: true,

mapTypeControlOptions: {

mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]

},

mapTypeId: MY_MAPTYPE_ID

};

/*for adding a custom marker*/

var image = ‘marker.png’;

/*ends*/

map = new google.maps.Map(document.getElementById(‘map-canvas’),mapOptions);

//map.setTilt(45);

//map.setHeading(90);

var styledMapOptions = {

name: ‘Custom Style’

};

var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

/*code for adding the custom image marker */

var markerIcon = new google.maps.MarkerImage(

image,

null,

null,

null,

new google.maps.Size(100, 100)

);

var labMarker = new google.maps.Marker({

position: myposition,

map: map,

icon: markerIcon,

title: “New York City Hall”

});

var my_map_marker = ‘New York City Hall is located at the center<br> of City Hall Park in the Civic Center area of <br>Lower Manhattan, New York City, between <br>Broadway, Park Row, and Chambers Street.<br><img src=”image.jpg”><br><br>’;

var infowindow = new google.maps.InfoWindow({

content: ‘<span class=”my_map_marker”>’+my_map_marker+'</span>’

});

google.maps.event.addListener(labMarker, ‘click’, function() {

infowindow.open(map,labMarker);

});

/*code ends*/

}

 

 

The above code may seem a little bit messy but all the customization is in there. Into the styles, you can edit all the code for road and water and other elements. You can also select the road label colors and everything. You can control the zoom option of the map and can assign all the mouse events like mouse dragging option or scroll wheel option etc. By the marker icon, you can set an image for mark your position and add a title to it, to show it on mouse hover.  You also can edit the popup window that appears on clicking the marker. Actually, you can add some HTML there to make it more attractive.

Step: 5

Now just call the map and load it. Add the code after the last step. And you are done.

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

Step: 6

Now call the map in your HTML.

<div id=”map-canvas” style=”height:400px;width:100%;”></div>

 

Hope it helped. Thanks.

About

I picked PHP and JavaScript as a career start-up and developed a lot of applications using these. Like Management Application, Web Scrapping, Web API, E-Commerce Solutions, Finance Application etc. Outside of my professional life, I also do projects and code for reputation and my personal portfolio.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*