The goal of this how to is to easily add multiple markes into the map on your own site using Google Maps API and PHP.
Google Maps API key
- If you don’t already have, sign up for the Google Account.
- Sign up for the Google Maps API key. Read at least the higlights from the Google Maps API terms. Sign up for your site, forexample http://www.mysite.com/
After sign up you’ll get your key and an example html code. If you lost your key anytime, you can sign up again for the same site and use a new key. You can also sign up for multiple sites keys if needed. You’ll get different key for each site.
JavaScript
To add multiple markers on your map we’ll use some basic PHP code. Google’s example code is a good starting point for this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABCDEFGH..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.setCenter(
new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"
style="width: 500px; height: 300px"></div>
</body>
</html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABCDEFGH..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.setCenter(
new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"
style="width: 500px; height: 300px"></div>
</body>
</html>
You have your API key on the html head and JavaScript to load on page load and div element to show the map. With map.setCenter(new GLatLng(37.4419, -122.1419), 13) you define the map’s center point and the zoom level. Here is an example.
To have some controls in the map, add this line into JavaScript load funtion:
map.addControl(new GSmallMapControl());
Add this JavaScript function to make markers:
function createMarker(point, text, title) {
var marker = new GMarker(point,{title:title});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
} |
function createMarker(point, text, title) {
var marker = new GMarker(point,{title:title});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
}
Add marker with this code:
var marker = createMarker(
new GLatLng(37.4419, -122.1419),
'Marker text', 'Example Title text');
map.addOverlay(marker); |
var marker = createMarker(
new GLatLng(37.4419, -122.1419),
'Marker text', 'Example Title text');
map.addOverlay(marker);
Note that you can add in the markers any html code like links and images for example. So, the code looks now like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABCDEFGH..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(
new GLatLng(37.4419, -122.1419), 13);
function createMarker(point, text, title) {
var marker =
new GMarker(point,{title:title});
GEvent.addListener(
marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
}
var marker = createMarker(
new GLatLng(37.4419, -122.1419),
'Marker text', 'Example Title text');
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"
style="width: 500px; height: 300px"></div>
</body>
</html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABCDEFGH..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(
new GLatLng(37.4419, -122.1419), 13);
function createMarker(point, text, title) {
var marker =
new GMarker(point,{title:title});
GEvent.addListener(
marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
}
var marker = createMarker(
new GLatLng(37.4419, -122.1419),
'Marker text', 'Example Title text');
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"
style="width: 500px; height: 300px"></div>
</body>
</html>
Here is an example.
PHP
In order to add multiple markes, we’ll use some PHP to iterate over some marker points. Let’s use an array in this example, but you could get the marker points for example from database or xml file. Put the following lines around marker adding lines:
<?php
$points = Array(1 => "37.4389, -122.1389",
2 => "37.4419, -122.1419",
3 => "37.4449, -122.1449");
foreach ($points as $key => $point) {
?>
var marker = createMarker(
new GLatLng(<?php echo $point ?>),
'Marker text <?php echo $key ?>',
'Example Title text <?php echo $key ?>');
map.addOverlay(marker);
<?php } ?> |
<?php
$points = Array(1 => "37.4389, -122.1389",
2 => "37.4419, -122.1419",
3 => "37.4449, -122.1449");
foreach ($points as $key => $point) {
?>
var marker = createMarker(
new GLatLng(<?php echo $point ?>),
'Marker text <?php echo $key ?>',
'Example Title text <?php echo $key ?>');
map.addOverlay(marker);
<?php } ?>
And here is the final code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABCDEFGH..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(
new GLatLng(37.4419, -122.1419), 13);
function createMarker(point, text, title) {
var marker =
new GMarker(point,{title:title});
GEvent.addListener(
marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
}
<?php
$points = Array(
1 => "37.4389, -122.1389",
2 => "37.4419, -122.1419",
3 => "37.4449, -122.1449");
foreach ($points as $key => $point) {
?>
var marker = createMarker(
new GLatLng(<?php echo $point ?>),
'Marker text <?php echo $key ?>',
'Example Title text <?php echo $key ?>');
map.addOverlay(marker);
<?php } ?>
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"
style="width: 500px; height: 300px"></div>
</body>
</html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABCDEFGH..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(
new GLatLng(37.4419, -122.1419), 13);
function createMarker(point, text, title) {
var marker =
new GMarker(point,{title:title});
GEvent.addListener(
marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
}
<?php
$points = Array(
1 => "37.4389, -122.1389",
2 => "37.4419, -122.1419",
3 => "37.4449, -122.1449");
foreach ($points as $key => $point) {
?>
var marker = createMarker(
new GLatLng(<?php echo $point ?>),
'Marker text <?php echo $key ?>',
'Example Title text <?php echo $key ?>');
map.addOverlay(marker);
<?php } ?>
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"
style="width: 500px; height: 300px"></div>
</body>
</html>
And here is the final example.
If you have let’s say hundereds or thousands and more markers in your map, you might want to give a try to Clusterer. It is an excellent and easy to use JavaScript library by Jef Poskanzer.
This how to showed only very basic usage of Google Maps API. To learn more Google Maps API has a good documentation and Mike has many excellent examples of the basics and more andvanced stuff.
Mozilla has released earlier than expected final version of Firefox 2.
