Although I have frequently used the Google Maps API, I have not needed to geocode (get the latitude and longitude coordinates) more than a few addresses at a time. My initial approach was to use the API geocoder class that is part of the Google Maps API. I was very surprised that after successfully geocoding about 20 addresess, the API returned OVER_QUERY_LIMIT instead of a valid geographic location. It turns out that despite the fact that I only had 50 addresses to geocode, I was running into the issue of submitting geocoding requests at too fast a rate. According to the documentation, I should have been using the the HTTP Geocoding Service. I then needed to get back the results from the geocoding service to create the map and added the markers. I solved the problem using a combination of PHP and jQuery.
First, be sure to include the following:
1. The current version of the jQuery library
2. <script type=”text/javascript” src=”<a href=”view-source:http://maps.google.com/maps/api/js?sensor=true”>http://maps.google.com/maps/api/js?sensor=true</a>”></script>
<script type="text/javascript">
var map;
var info_window = new google.maps.InfoWindow({content: ''});
function initialize() {
jQuery.getJSON("clubLocations.php" , function(data) {
var latlng = new google.maps.LatLng(47.6062095, -122.3320708);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
for (i=0; i<data.length; i++) {
addMarker(data[i].lat, data[i].lng, data[i].clubname, data[i].address)
} });
}
function addMarker(lat, lng, title, note) {
var myLatlng = new google.maps.LatLng(lat, lng)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:title
});
marker.note = note;
google.maps.event.addListener(marker, 'click', function() {
info_window.content = '<div>Directions to <a href="http://maps.google.com/maps?daddr=' +marker.note +'" target="_blank">' + marker.getTitle() + '</a> </div>';
info_window.open(map, marker);
});
return marker;
}
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
initialize();
});
</script>
So, what does all of that do? It pulls in the JSON encoded data created clubLocations.php and loops through creating the markers and info window. As for the PHP code, we use SimpleXML to process the results from the HTTP Geocoding Service.
<?php
session_start( );
if (!isset($_SESSION['json'])) {
$markers = array();
$markerRow = 0;
$geocode = simplexml_load_file('http://maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false');
$markers[0] = array("clubname"=>strval($club), "address"=>strval($geocode->result->formatted_address),"lat"=>strval($geocode->result->geometry->location->lat), "lng"=>strval($geocode->result->geometry->location->lng));
$_SESSION['json'] = json_encode($markers);
}
echo $_SESSION['json'];
?>
Note: In the actual website, we have a series of addresses to loop through so we would increment $markerRow and put the resulting array into $markers[$markerRow] . You can view the results of the geocoding on this website.
See https://www.koolkatwebdesigns.com/google-map-api-v3-revisited/ for an update.
See
-0 Comments