homepage Welcome to WebmasterWorld Guest from 54.226.252.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

    
Google map with multiple markers and location
hozyali




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

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




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved