[COLOR=#000000][FONT=Times New Roman][COLOR=#444444][FONT=Segoe UI]I was reading a jQuery and Google Maps tutorial at http://marcgrabanski.com/article/jquery-google-maps-tutorial-basics and I have a few questions:
-
In the current script, the markers are set to be random within a radius. What would be an easy way to switch from that to using individual markers that I set from latitudes and longitudes? I’m going to be using around 5 way points surrounding an area and can either hard code or throw in some PHP code.
-
In addition to setting my markers, the navigation is done through generated links like “Point 1”, “Point 2”, and so forth. How would I insert code to replace .html("Point "+i) with something else? I’m guessing to have a main city, have a few towns around it, and the “Point” links are replaced with text I want to use. Probably hard code or use PHP/MySQL to show a zip code or town related to that marker.
Here is a sample of the JavaScript code. I only threw in PHP echo tags for the start lat/long and I have that set:
$(document).ready(function(){
var map = new GMap2($("#map").get(0));
var StartArea = new GLatLng(<?=$latitude?>,<?=$longitude?>);
map.setCenter(StartArea, 8);
// setup 10 random points
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var markers = [];
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
marker = new GMarker(point);
map.addOverlay(marker);
markers[i] = marker;
}
$(markers).each(function(i,marker){
$("<span />")
.html("Point "+i)
.click(function(){
displayPoint(marker, i);
})
.appendTo("#list");
GEvent.addListener(marker, "click", function(){
displayPoint(marker, i);
});
});
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
function displayPoint(marker, index){
$("#message").hide();
var moveEnd = GEvent.addListener(map, "moveend", function(){
var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
$("#message")
.fadeIn()
.css({ top:markerOffset.y, left:markerOffset.x });
GEvent.removeListener(moveEnd);
});
map.panTo(marker.getLatLng());
}
});
[/FONT][/COLOR][/FONT][/COLOR]