Here I want to explain how you can integrate Google Maps on your webpage and show your location with marker on google map in contact us page.
Google Maps is a Web-based service that provides detailed information about geographical regions and sites around the world. In addition to conventional road maps, Google Maps offers satellite views. In some cities, Google Maps offers street views comprising photographs taken from vehicles.
In this tutorial I am explaining two methods to integrate Google Maps on your website.
First is First
Before starting we need an API key from google, so our first step is to get the google API key. Follow below steps for it.
- Go to google API console
- Create a new Project.
- Click on Create Credentials
- Choose API Key
- A popup window will be shown, Click on Browser Key.
- Give the name for the project.
- Fill “Accept requests from these HTTP referrers (web sites)” textbox.
Give site name like *.scoopism.com/*
Astrick(*) is a wildcard character.
- Press create button
- Copy the API Key from the popup.
- Enable the LibraryFor this tutorial we need to enable two Google Maps APIs Libraries.
- Click on “Google Maps JavaScript API” and press “ENABLE” button on the top of the page (as shown in below picture).
- Click on “Google Maps Embed API” and press “ENABLE” button on the top of the page (as shown in below picture).
- Click on “Google Maps JavaScript API” and press “ENABLE” button on the top of the page (as shown in below picture).
Now we have an API Key, we can integrate Google Maps on our webpage.
Embed google map using iframe.
Here is the code to embed Google map on iframe.
// embed google map on iframe
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY_which_wecreated"></iframe>
This is the basic structure to embed Google map, till now we didn’t added the pace to show in the map. To add place, we will pass the place name in the URL like shown below.q=Bengaluru+Karnataka+India
// embed google map on iframe with place in url
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY_which_we_created&q=Bengaluru+Karnataka+India"></iframe>(The Google Maps Embed API supports both + and %20 when escaping spaces.)
Full code to embed Google Map
// full embed google map code
<iframe style="border: 0;" src="https://www.google.com/maps/embed/v1/place?q=Bengaluru,+Karnataka,+India&key=AIzaSyCJb1IqP_s-RMMavH9I9JiURw4vJkQ6lHc" width="100%" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>Render google map using js (javascript)
To set up a google map on webpage using javascript only 5 simple steps are needed.
- Load the Google API
- Set Map Properties
- Create a Map Container
- Create a Map Object
- Add an Event Listener to Load the Map
Load the Google API
We already have Google API Key,( if not then click here to get API Key).
// google api loading
<script src="http://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>"></script>
// for our example am adding the API key which we created earlier
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJb1IqP_s-RMMavH9I9JiURw4vJkQ6lHc"></script>
Set Map Properties
Create a function to initialize the map lets call it map_init()
// map init
function map_init(){
// code goes here
}
Create a variable to store our location inside the function.Pass the coordinates in the order: latitude, longitude.
// location var myLocation=new google.maps.LatLng(,); // this is example. var myLocation=new google.maps.LatLng(12.906922,77.644973);
Create an object to define map properties.
Here am adding three properties:-
- center
The center property specifies where to center the map.We will pass the variable we created above(myLocation) - zoom
The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution. - mapTypeId
The mapTypeId property specifies the map type to display. The following map types are supported:- ROADMAP (normal, default 2D map)
- SATELLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
For this example am using ROADMAP . You can try with your choice.
// map property
var mapProp = {
center:myLocation,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
I am binding all code in this step together.
// all map properties
function map_init(){
var myLocation=new google.maps.LatLng(12.906922,77.644973);
var mapProp = {
center:myLocation,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}
Create a Map Container
To show the map we need a div. Give the width and height using CSS.
// Map Container
<div id="map" style="width: 100%; height: 300px;"> </div>
Create a Map Object
The below code will creates a new map inside the
<div>element with id="map", using the parameters that are passed (mapProp).
// map object
var map=new google.maps.Map(document.getElementById("map"),mapProp);
Add an Event Listener to Load the Map
Add a DOM listener that will execute the map_init() function when the page is loaded.
// load map
google.maps.event.addDomListener(window, 'load', map_init);
Complete Code Till Now
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJb1IqP_s-RMMavH9I9JiURw4vJkQ6lHc"></script>
<script type="text/javascript">
function map_init()
{
var myLocation=new google.maps.LatLng(12.906922,77.644973);
var mapProp = {
center:myLocation,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
}
google.maps.event.addDomListener(window, 'load', map_init);
</script>Our map look like this
Now you can see a map, in that there is not mentioned our location or any data about us. So we need to customize it. I am going to add only three extra things to it.
First of all, I am adding a marker for our location.
Add the below code under map_init() after map object.
// marker
var marker=new google.maps.Marker({
position:myLocation,
});
marker.setMap(map);Now our map became like this
A small marker came in the map.
Next am adding a title to that marker.
// title for marker
var infowindow = new google.maps.InfoWindow({
content:"
<h4>Scoopism</h4>
<p>Scoopism.com |your daily dose of inspiration</p>
"
});
infowindow.open(map,marker);infowindow is used to give title to the marker.
Our map is modified like this.
Last but not least, i’m gonna make this map grayscale.
Add the bellow style inside map_init()
var styles = [{
"featureType": "landscape",
"stylers": [{
"saturation": -100
}, {
"lightness": 65
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"stylers": [{
"saturation": -100
}, {
"lightness": 51
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"saturation": -100
}, {
"lightness": 30
}, {
"visibility": "on"
}]
}, {
"featureType": "road.local",
"stylers": [{
"saturation": -100
}, {
"lightness": 40
}, {
"visibility": "on"
}]
}, {
"featureType": "transit",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": -25
}, {
"saturation": -100
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"hue": "#ffff00"
}, {
"lightness": -25
}, {
"saturation": -97
}]
}];
map.setOptions({
styles: styles
});Complete Code
// complete code
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJb1IqP_s-RMMavH9I9JiURw4vJkQ6lHc"></script>
<script type="text/javascript">
function map_init()
{
var myLocation=new google.maps.LatLng(12.906922,77.644973);
var mapProp = {
center:myLocation,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
var marker=new google.maps.Marker({
position:myLocation,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"<h4>Scoopism</h4><p>Scoopism.com | Your daily dose of Inspiration </p>"
});
infowindow.open(map,marker);
var styles = [{
"featureType": "landscape",
"stylers": [{
"saturation": -100
}, {
"lightness": 65
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"stylers": [{
"saturation": -100
}, {
"lightness": 51
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"saturation": -100
}, {
"lightness": 30
}, {
"visibility": "on"
}]
}, {
"featureType": "road.local",
"stylers": [{
"saturation": -100
}, {
"lightness": 40
}, {
"visibility": "on"
}]
}, {
"featureType": "transit",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": -25
}, {
"saturation": -100
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"hue": "#ffff00"
}, {
"lightness": -25
}, {
"saturation": -97
}]
}];
map.setOptions({
styles: styles
});
}
google.maps.event.addDomListener(window, 'load', map_init);
</script>
<div id="map" style="width: 100%; height: 400px;"></div>Bonus
How to Add Multiple Location in a Map
There are few changes in map_init(). Bellow is the complete code for map_init() and here is the Demo
// map init function
function map_init()
{
var map;
var bounds = new google.maps.LatLngBounds();
var mapProp = {
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
map.setTilt(45);
var markers = [
['Sonyworld Signal, Bangalore', 12.9372741, 77.6269082],
['kormamangala water tank, Bangalore', 12.9275417, 77.6209797]
];
var infoWindowContent = [
['
<div class="info_content">' + '
<h3>Sonyworld Signal</h3>
' + '
<p>Koramangala, Bangalore</p>
' + '</div>
'],
['
<div class="info_content">' + '
<h3>kormamangala water tank</h3>
' + '
<p>Koramangala, Bangalore</p>
' + '</div>
']
];
var infoWindow = new google.maps.InfoWindow(), marker, i;
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
var styles = [{
"featureType": "landscape",
"stylers": [{
"saturation": -100
}, {
"lightness": 65
}, {
"visibility": "on"
}]
}, {
"featureType": "poi",
"stylers": [{
"saturation": -100
}, {
"lightness": 51
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"saturation": -100
}, {
"lightness": 30
}, {
"visibility": "on"
}]
}, {
"featureType": "road.local",
"stylers": [{
"saturation": -100
}, {
"lightness": 40
}, {
"visibility": "on"
}]
}, {
"featureType": "transit",
"stylers": [{
"saturation": -100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": -25
}, {
"saturation": -100
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"hue": "#4ECAD9"
}, {
"lightness": -25
}, {
"saturation": -97
}]
}];
map.setOptions({
styles: styles
});
}