Welcome to WebmasterWorld Guest from 107.20.59.213

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Google map with multiple markers and location

     

hozyali

8:43 pm on Jul 21, 2011 (gmt 0)

5+ Year Member



Hi,

I have a recordset from which I am getting some location and addresses. I want to display a Google map with pointers to those locations found from my php recordset.

I am really new with Google Maps, but good with php.

Can anyone please help?

thanks

rocknbil

5:39 pm on Jul 22, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Well, it's a large project, one that can get slow on the page if you have more than 20 or so markers.

Most of the time you'll have data in a DB for the locations. One approach is to pull the address data and query the map API for the latitude and longitude, then again for the map markers. Obviously this is very slow and intensive.

The best approach I found is to store the lat/long in the database along side the other relevant data, then you pull that locally from the database and just query the API for the markers. Some starter code (not debugged, for example only:)


// Array of field names you need
$v = array('name','phone','address','city', 'state','zip','url,'lat','lng');
$len = count($v-1);
// This builds the JS in the next section
$output = '
var markers=[];
var infoWindow = new google.maps.InfoWindow;
var geocoder;
var map;
locations_object = [
';
//
$total = mysql_num_rows($result);
$k=0;
while ($row = mysql_fetch_array($result)) {
$j=0;
$k++;
$output .= '
{
';
for ($i=0;$i<=$len;$i++) {
$output .= "\t\t'" . $v[$i] . "':'" . $row[$v[$i]] . "'";
$j++;
if ($j<$len) { $output .= ','; }
$output .= "\n";
}
$output .= "\t\t}";
// Add the comma on all but the last "store" array
if ($k<$total) {
$output .= ",
";
}
} // while
$output .= '
];
';



Then it's down to the Javascript you output from PHP for the page. It should look something like this:

Create your map element (p, div), in this example, "mymap"
<p id="mymap">One moment, loading map...</p>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var markers=[];
var infoWindow = new google.maps.InfoWindow;
var geocoder1;
var map1;
locations_object = [
// you will have one of these for each location
// be sure to REMOVE the last comma after inner }
// If the PHP works right, you won't need to worry about it. :-)
{
'name':'location one',
'phone':'1234-5678 ',
'address':' the address line',
'city':'the city',
'state':'CA',
'zip':'09201',
'url':'the-page-url',
'lat':'33.1234567',
'lng':'-114.1234567'
},
{
'name':'location two',
'phone':'1234-5678 ',
'address':' the address line 2',
'city':'the city 2',
'state':'CA',
'zip':'09201',
'url':'the-page-url2',
'lat':'32.1234567',
'lng':'-113.1234567'
}
];
//
function initialize() { drawMap(); }
//
function drawMap () {
if (document.getElementById('mymap')) {
var latlng = new google.maps.LatLng("32.111111","-114.000111");
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('mymap'), myOptions);
for (j=0;j<locations_object.length;j++) {
createLocations(j,locations_object[j],map);
}

}
}
//
function createLocations(num,store,map) {
var myLatlng = new google.maps.LatLng(store["lat"],store["lng"]);
var image = new google.maps.MarkerImage('/uri-to/your/gmap-icon.png',
new google.maps.Size(28, 39),
new google.maps.Point(0,0),
new google.maps.Point(0, 39));
var shadow = new google.maps.MarkerImage('/uri-to/your/gmap-shadow.png',
new google.maps.Size(51, 28),
new google.maps.Point(0,0),
new google.maps.Point(-15, 28));
//
// These are for the map balloons - apply styles via CSS for this page
var html = "<div id=\"info-windows\">";
if (store["name"]) { html += "<h3>"+store["name"]+"</h3>"; }
if (store["phone"]) { html+= "<h4>"+store["phone"]+"</h4>"; }
if (store["address"] || store["city"] || store["state"] || +store["zip"]) {
html += "<p id=\"addr\">";
if (store["address"]) { html += store["address"]+"<br>"; }
if (store["city"]) { html += store["city"]; }
if (store["state"] || +store["zip"]) { html += ", "; }
if (store["state"]) { html += store["state"] + " "; }
if (store["zip"]) { html += store["zip"]; }
html += "</p>";
}
if (store["url"]) { html += "<p><a href=\"/"+store["url"]+"\">Details</a></p>"; }
html += "</div>";
markers[num] = new google.maps.Marker({
map: map,
position: myLatlng,
shadow: shadow,
icon: image,
});
bindInfoWindow(markers[num], map, infoWindow, html);
}
//
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>


This was taken from a working project and is probably not copy and paste code, but if you pick it apart you can see how it works. I would recommend NOT outputting it inline in the page, create a PHP resource to do this and do

<script type="text/javascript" src="maps.php"></script>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month