How to add multiple markers with custom icons on google map using php

by  
Share:
How to add multiple markers with custom icons on google map using php

Nowadays it’s very common to add a google map on your website letting your customer/visitors know about your location.The new Google maps API v3 has come with power packed features, not only it provides the facility to add multiple markers but you can also associate custom icons with it, toggle between satellite and map view and many more awesome features. In this tutorial I will be explaining how to add multiple markers with custom icons on google map using php and Google map API.

View Demo

What Google Maps API does?

In just simple words it can do wonders, In this tutorial you will see only a glimpse of what can be done. To see all the features of the Goolgle Maps API visit the Official Site. Features shown in this tutorials are as follows:

  • Add multiple markers.
  • Add a marker by using latitude and longitude.
  • Add a marker by providing address.
  • Add custom icon to a maker.
  • Display info window when markers are clicked.
  • Easy adjustable height and width of the map.

Adding the google map to your webpage using php?

In order add a Google map to you webpage. you will first need to include simpleGMapAPI class file in your page. Take a look below.

<?php
require_once("simpleGMapAPI.php");
?>

After you include the simpleGMapAPI class file in you page, then create an object of the class.
<?php
$map = new simpleGMapAPI();
?>

Add custom height and width of the google map. You have to either use px(for pixel) or % (Percentage).
<php
// assign width and height in pixels
$map->setWidth('500px');
$map->setHeight('500px');

// or assign width and height in percentage
$map->setWidth('100%');
$map->setHeight('500px');
?>

You can turn on/off zooming on double click or mouse scroll event.
<?php
$map->setDoubleclickZoom(true);
$map->setScrollwheelZoom(true);
?>

Add an address to the map, set the tooltip and info window title. Add a custom icon link. Download some custom icon via this website.
<?php
$map->addMarkerByAddress("Golden Temple, Amritsar, Punjab", "Golden Temple, Amritsar", '<h3>Golden Temple, Amritsar</h3><p>Sri Harmandir Sahib, also known as Sri Darbar Sahib or Golden Temple, (on account of its scenic beauty and golden coating for English speaking world), is named after Hari(God) the temple of God. The Sikhs all over the world, daily wish to pay visit to Sri Amritsar and to pay obeisance at Sri Harmandir Sahib in their Ardas</p>', "http://demos.aarafacademy.com/google-map1/icons/sikh.png");
?>

Display the map on the page with auto zoom enabled.
<?php
$map->printGMapsJS();
$map->showMap(true);
?>

How to add a marker by latitude and longitude.

If you want to add a marker for a specific location on the map you can do that by adding longtitude and latitude. To get latitude and longitude of a particular place visit this site. Get the latitude and longitude annd just put up in the function. Let’s see the function and its parameter.

<?php
function addMarker($lat, $lng, $tooltip="", $info="", $iconURL="", $clickable=true) {
 // function body here
}

// example for adding marker to the map
$map->addMarker("18.983307", "72.808907" , "Haji Ali, Mumbai, Maharashtra", '<h3>Haji Ali, Mumbai, Maharashtra</h3>', "http://demos.aarafacademy.com/google-map1/icons/islam.png");
?>

How to add a marker by address.

Adding a marker by address is quite simple. Just add the exact address along with tooltip text, info-window details (if you have) and also the custom icon url to the function.

<?php 
function addMarkerByAddress($address, $tooltip="", $info="", $iconURL="", $clickable=true)
{
  // function body here
}

// add this function to your map
$map->addMarkerByAddress("Kali Temple, Kalighat, Kolkata, West Bengal", "Kali Temple, Kalighat, Kolkata, West Bengal", '<h3>Kali Temple, Kalighat, Kolkata, West Bengal</h3>', "http://demos.aarafacademy.com/google-map1/icons/temple.png");
?>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

If you know any other tricks regarding the map do share with us.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Peter on

First of all, I would like to thank you for wonderful post, I wonder is it possible to create multiple maps on same page using this API ??? is so kindly share how this can be done. Thank you shahrukh Khan

Reply
Shahrukh Khan on

Thanks a lot. Yes it can be done. just create two pages and put the above code(say map1.php and map2.php) and from the main page(say index.php).. call those two page in iframe… I hope this helps.

Reply
khan on

bro thanks for this beautiful thing,,i was searching from nearly 15 days,but i cant beleive this helps me as i needed for my application,,keep going,,thank a lot lot lot

Reply
khan on

bro thanks for this beautiful thing,,i was searching from nearly 15 days,but i cant believe this helps me as i needed for my application,,keep going,,thank a lot lot lot.

Reply
neeraj on

Hi, can we make a link on markers.So that when click on marker redirect to the given link on marker

Reply
Shahrukh Khan on

I am not sure that will work. You can click on the maker and a popup will appear from where you can give a hyperlink. You can check gmaps.js. if they provide any.

Reply
neeraj on

Thanks for your reply.

prabakarab on

thank you so much for sharing this.
it helped me lot

Reply
Shahrukh Khan on

Thanks a lot

Reply
N. on

I didn’t know how to set the location I want, I’ve added the latitude and longitude but the address not. what are the 3 elements you put?

Reply
Shahrukh Khan on

use this
// first one is latitude
// second one is longitude
// third one is tool-tip
// fourth one is info
// fifth one is icon/marker URL
$map->addMarker(“18.983307”, “72.808907” , “Haji Ali, Mumbai, Maharashtra”, ‘

Haji Ali, Mumbai, Maharashtra

‘, “http://demos.aarafacademy.com/google-map1/icons/islam.png”);

Reply
N. on

Sorry for disturbing but I couldn’t get the latitude and longitude for the locations I want from the website you mentioned. It shows only the atitude and longitude for the hall city and I want to mark 2 different locations in the same city. Thank you.

N. on

Thanks a lot. that really helped.

Shahrukh Khan on

your welcome.

Dante on

Hi, do you know if i could add a search box in the map that let search markers by name o lat and long?

Reply
Shahrukh Khan on

I think u should look at this store locator plugin http://plugins.jquery.com/storelocator/

Reply
cris watson on

Hi thanks for sharing this awesome post. it is great to visit your blog and get such a code that solve my problem. i want to get one more thing. i want to give a background color to a particular region on this map. How can i do this?????

Reply
Shahrukh Khan on

TO add a circle use this addCircle Method
$opts = array('fillColor'=>'#0000dd', 'fillOpacity'=>0.2, 'strokeColor'=>'#000000', 'strokeOpacity'=>1, 'strokeWeight'=>2, 'clickable'=>true);
$map->addCircle(28.6139, 77.2090, 30000, "New Delhi, India", $opts);
or use rectangle
$map->addRectangle(28.123, 76.225, 30.1456, 78.14, "New Delhi, India", $opts);

Reply
Neeraj Kumar on

What the hell is this simpleGMapAPI.php and from where can i download it?

Reply
Shahrukh Khan on

Please mind the tone in which you are posting the comment. We are here to help but never use this kind of tone. I guess you never reached the end of the article where it clearly says to CLICK ON THE SOCIAL LINK TO UNLOCK THE DOWNLOAD FILE.

Reply
trilok on

On Google map I have marked multiple locations. I just need to remove that red marker(pointer) and replace it with Marker a custom icon(image) present in mysql database+php+javascript Ex : like round circle images like when we book a cab/services displaying faces.

Reply
swati on

On Google map I have marked multiple locations. I just need to remove that red marker(pointer) and replace it with Marker a custom icon(image) present in mysql database+php+javascript Ex : like round circle images like when we book a cab/services displaying faces. please tell me how is it possible i need it

Reply
taufikmas on

thanks for that .. i wanna make if status 0 then marker greeen else if status 1 then marker is RED.thanks

Reply
Shahrukh Khan on

well you need to do that from PHP end, Have two different ICONS (PNG) and do it accordingly.

Reply
swati on

On Google map I have marked multiple locations. I just need to remove that red marker(pointer) and replace it with Marker a custom icon(image) present in mysql database+php+javascript Ex : like round circle images like when we book a cab/services displaying faces. please tell me how is it possible i need it. shahrukh sir please help me

Reply
Shahrukh Khan on

you want custom images, just replace the image in the folder.

Reply
sudhan on

Hi bro, I need a help,can you please tell us? we got a new project on the name of dentalreach,for that we have to create a page to find the dentist around india,for refference thay have given this website https://findadentist.ada.org/search-results , i dont know whether they had done with the help of API or the datas are comming from DATABSE itself,can you please help regarding this information bro.

Reply
Shahrukh Khan on

Hi. they must have their own database i think.

Reply
San on

Thanks for good job. but why when i renamed folder name, maps cannot display

Reply
Shahrukh Khan on

see if the paths are correct.

Reply
San on

The path is ok. when i renamed it back to google-map1, maps will display. is it relate to google API key? Thanks.

Reply
Shahrukh Khan on

not at all

Reply
raj on

hey thanks for the tutorial bro.. its awezome and clear. but one doubt how can i show multiple markers on map?

Reply
Shahrukh Khan on

Thanks.. You can show as many markers you like.

Reply
Sun on

It display only white page when upload into hosting. Does it need to modified code? in localhost it is ok. And how to delete error “for development purpose only” in map? thank you

Reply
Shahrukh Khan on

you need to get a api key from google projects.

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.