Plotting Markers in Google Maps API V3

1
votes

I am new to writing Google maps code, and have limited knowledge of Javascript and PHP. However, I manage to write the PHP file that connects to my SQL DB and outputs the XML file. Although, I cannot figure out how to create multiple markers that relate to the XML file, which has previously geocoded lat/lng coordinates.

I know the create market function(?) is used to create the market on the map, but I don't know how to tell the function to iterate through the XML file that is generated, and then display a marker. I think I would like to limit the showing of markers based on tile as well, because all the objects I want to display are within a 20 mile radius.

Point me in the right direction, please. I don't understand the logic of the code, some of it at least. Point me to the proper articles, and how to peace all the code together. Such as creating the marker, filtering by grid, etc. I know it can be done!

Thank you.

3
javascriptgoogle-maps-api-3google-maps-markers
The documentation has examples. code.google.com/apis/maps/documentation/javascript/… How far have you got it? Have you at least tried the example? - Eduardo
Right now i only have a map centered on the lat/lng that I want. and the zoom level that I want. I have a php file out putting the valid xml with all my columns such as SIC, Zip, lat, lng, address, name, etc. But I don't understand Javascript well enough to write code to iterate through the XML file to grab the lat/lng information in order to plot it on the map. I think I understand how it would work, just not how to implement it. - user1001259

3 Answers

1
votes

First you need to learn how to parse XML data so you can use it with the Maps API. For this I recommend using jQuery to do this. Here is a basic article to get you started on reading XML with jQuery: http://think2loud.com/224-reading-xml-with-jquery/

Then work through the Google Maps documentation, there are excellent examples on handling markers.

I think I would like to limit the showing of markers based on tile as well, because all the objects I want to display are within a 20 mile radius.

I do not know exactly what you are asking for here. You cannot as far as I know filter based on a map tile. You can display markers that are within X miles of a particular point. A bare bones easy way to do it is just find coordinates that are withing a particular bounding box with latitude and longitudes within X number of degrees from a particular point. If you did it this way I would recommend doing it on the server side. Here is a SQL query that filters the locations within roughly 15 miles (article context here):

SELECT Address, SQRT(POWER(Latitude - @Latitude, 2) + POWER(Longitude - @Longitude, 2)) * 62.1371192 AS DistanceFromAddress
FROM Stores
WHERE ABS(Latitude - @Latitude) < 0.25 AND ABS(Longitude - @Longitude) < 0.25
ORDER BY DistanceFromAddress

A better way to do it is use the Haversine formula to determine if a point is within range. You can hard code this yourself: example or use Google's Geometry library (which uses the haversine formula) to accomplish this.

0
votes

There are many ways to create markers with the XML data.

  1. Write a php function that gets called when you load your page and it outputs the lat/lng and other data needed to plot the markers and create their tooltips etc. You could send data in any format e.g. XML, JSON to the fe. Javascript cannot read files from the front-end as of now( Chrome has an API but I would not recommend going with that, server sided approach is safer.)

  2. To just zoom onto a area which has all the markers and not see the entire WORLD_VIEW of the gmaps also there are many ways. One which I am aware is create a LatLngBounds Object which is basically like a rectangle and that just encloses all your markers. Then in GoogleMaps API you will find a method called fitBounds which is a method of the Map class, which would fit this object that creates a boundary around all your markers on the map div.

I can give the code through a fiddle for you if you want, let me know about that.

0
votes

I am also using Google Maps API to display markers - however with JSON. I found the following regarding using XML with markers:

 // Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

Also a good discussion on using XML vs other transports with this API.