Draw Lines on Google Map using JavaScript API

draw-path-on-google-map (2)If you wanted to represent geographical locations on Google map, You might need to draw the lines on Google map. Here in this article I'll explain how to draw the path among the locations by using Google map JavaScript API.

I'll create an array of locations in PHP and I'll also define the API key in PHP. Later I'll iterate every address and draw the path among all the locations.

You can change the center of the map by changing the latitude and longitude here:

You also can change the zoom level of the map here:

Here is the source code for drawing the path on Google map:



index.php

  ...  Read More

Share This:


How to draw the route in a map with points on Google Maps

Draw path on google mapMany of the location Apps we need to draw a path from origin to destination. We need to draw path between some locations.

I'll be drawing the path by two modes. Either you are walking or you are driving. I'll be showing optimize way points for the travel path.

Here I'm using Google Map JavaScript API for drawing the route between the points on Google Map. You can draw the path among multiple points so it is not restricted to create path between two points or three points.



I have created a PHP file where I have defined the Google map API key and the way points where you can draw the route path. I have created an array of way points you also can fetch these way points from your database if needed. ...  Read More

Share This:


Static map or Image of google map with custom marker icon

http://maps.google.com/maps/api/staticmap?center=28.4595,77.0266&size=400x200&zoom=15&maptype=roadmap&markers=icon:%20https://cdn4.iconfinder.com/data/icons/iconsimple-places/512/pin_1-128.png|shadow:true|28.4595,77.0266&sensor=false

Icon URL : https://cdn4.iconfinder.com/data/icons/iconsimple-places/512/pin_1-128.png

Latitude: 28.4595

Longitude: 77.0266

Share This:


Background color in google map

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
var myCenter=new google.maps.LatLng(28.4595,77.0266);

function initialize()
{
var mapProp = {
center:myCenter,
zoom:10,
styles: [{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#000000"
}, {
"lightness": 40
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 21
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 19
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}], ...  Read More

Share This:


Create links over google map

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var gurgaon = new google.maps.LatLng(28.4595,77.0266);
var delhi = new google.maps.LatLng(28.6139,77.2090);

// Add a Gurgaon control that returns the user to Gurgaon
function GurgaonControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'green';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to Gurgaon';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.color='white';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Gurgaon<b>'
controlUI.appendChild(controlText); ...  Read More

Share This:


Google Map - Disable zoom control and map type control

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
var myCenter=new google.maps.LatLng(28.4595,77.0266);

function initialize()
{
var mapProp = {
center:myCenter,
zoom:10,
zoomControl:false,
mapTypeControl:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

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

var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head> ...  Read More

Share This:


Disable default control from google map

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
var myCenter=new google.maps.LatLng(28.4595,77.0266);

function initialize()
{
var mapProp = {
center:myCenter,
zoom:10,
disableDefaultUI: true, // true if want to enable default control UI
mapTypeId:google.maps.MapTypeId.ROADMAP
};

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

var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
...  Read More

Share This:


Google Map - Creating multiple markers and infowindow on click

<html> <head> <script src="http://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript"> // * // * Add multiple markers // *// necessary variables var map; var infoWindow;

// markersData variable stores the information necessary to each marker
var markersData = [
{
lat: 40.6386333,
lng: -8.745,
name: "Camping Praia da Barra",
address1:"Rua Diogo Cão, 125",
address2: "Praia da Barra",
postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the last item of each marker
},
{
lat: 40.59955,
lng: -8.7498167,
name: "Camping Costa Nova",
address1:"Quinta dos Patos, n.º 2",
address2: "Praia da Costa Nova",
postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in the last item of each marker
},
{
lat: 40.6247167,
lng: -8.7129167,
name: "Camping Gafanha da Nazaré",
address1:"Rua dos Balneários do Complexo Desportivo",
address2: "Gafanha da Nazaré",
postalCode: "3830-225 Gafanha da Nazaré" // don't insert comma in the last item of each marker
} // don't insert comma in the last item
];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.601203,-8.668173),
zoom: 9,
mapTypeId: 'roadmap',
}; ...  Read More

Share This:


Open an InfoWindow When Clicking on The Marker

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var delhi=new google.maps.LatLng(28.6139,77.2090);
function initialize()
{
var mapProp = {
center:delhi,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

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

var marker=new google.maps.Marker({
position:delhi,
});

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
content: "This is hurt of my India"
}); ...  Read More

Share This:


Google Maps - InfoWindow

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var delhi=new google.maps.LatLng(28.6139,77.2090);
function initialize()
{
var mapProp = {
center:delhi,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

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

var marker=new google.maps.Marker({
position:delhi,
});

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
content: "This is hurt of my India"
});
infowindow.open(map,marker);
...  Read More

Share This: