• Home
  • PHP
  • Embed Google Map with several locations (GeoCode addresses and display “info window” for each marker)

Embed Google Map with several locations (GeoCode addresses and display “info window” for each marker)

1. Include javascript at the top of the page. It will create a map, get a string of addresses and their respective “project names” and “amount of images” from a form that we fill during the database fetching process (see Step #3 below).

The script will then geocode each address (get latitude and longitude) and place a marker on the map. By clicking on the marker you will get an “info-window” (in our example – with project name and the amount of photos for each project). We specify the image for the marker as well.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOURAPI&sensor=false"></script>
<script type="text/javascript">
var map;
var geocoder;
var xml;
var markers;
var address;
var infowindow = null;

// On page load, call this function
function load() {
    var latlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var image = '/img/mapMarker.png';
    // Create new map object
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    infowindow = new google.maps.InfoWindow({ content: "loading..." });

    // Create new geocoding object
    geocoder = new google.maps.Geocoder();
    var allProjectNames = document.getElementById('allProjectNames').value;
    var allProjectNamesArr=allProjectNames.split('||');
    var allAddresses = document.getElementById('allAddresses').value;
    var AllAddressesArr=allAddresses.split('||');
    var allImagesAmount = document.getElementById('allImagesAmount').value;
    var allImagesAmountArr=allImagesAmount.split('||');
    var countMarkers=0;
    for(var i=0; i<AllAddressesArr.length; i++) {
        geocoder.geocode({'address': AllAddressesArr[i]}, function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: image,
                    html: '<b style="color:#313951;font-size:18px;">'+allProjectNamesArr[countMarkers]+'</b><br><div style="color:#313951;font-size:12px;">'+AllAddressesArr[countMarkers]+'</div><br><a href="/project_showcase/" style="color:#990000;font-size:15px;text-decoration:underline;">'+allImagesAmountArr[countMarkers]+' photos</a>'
                });
                countMarkers++;
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
}
</script>

2. We then have to make sure to load the script above automatically on page load by specifying:

<body onload="load()">

3. Then goes our “while” loop for fetching database data and placing it into hidden input fields:

$allAddresses='';
$allProjectNames='';
$allImagesAmount='';
$sSQL = "SELECT id,title,address FROM projects ORDER BY position ASC";
$result = mysql_query($sSQL) or die("err: " . mysql_error().$sSQL);
while($row = mysql_fetch_assoc($result)) {
    if($allAddresses=='') {
        $allAddresses=$row['address'];
        $allProjectNames=$row['title'];
    } else {
        $allAddresses.='||'.$row['address'];
        $allProjectNames.='||'.$row['title'];
    }
    //then we fetch the images data inside this loop in the same manner
}

with html below:

<input type="hidden" name="allAddresses" id="allAddresses" value="<?=$allAddresses?>" />
<input type="hidden" name="allProjectNames" id="allProjectNames" value="<?=$allProjectNames?>" />
<input type="hidden" name="allImagesAmount" id="allImagesAmount" value="<?=$allImagesAmount?>" />

4. Have the placeholder for the map somewhere on the page:

<div id="map" style="width:300px; height:500px;"></div>

Tags: , , , , ,

Trackback from your site.

Leave a comment