I am trying to create markers from a database. I do this by outputting the DB results to json and loading the json in the google maps code. The JSON is valid and is being loaded.
My full Google maps code is:
google.load("maps", "2");
// make a json request to get the map data from the Map action
$(function() {
if (google.maps.BrowserIsCompatible()) {
$.getJSON("/GoogleMaps/Map", initialise);
}
});
function initialise(mapData) {
var map = new google.maps.Map2($("#map")[0]);
map.addControl(new google.maps.SmallMapControl());
map.addControl(new google.maps.MapTypeControl());
map.setMapType(G_SATELLITE_MAP);
var latlng = new google.maps.LatLng(52.370, 4.893);
var zoom = 8;
map.setCenter(latlng, zoom);
map.setCenter(latlng, zoom);
$.each(mapData.locations, function(i, location) {
setupLocationMarker(map, location);
});
}
function setupLocationMarker(map, location) {
console.debug(location.LatLng);
var latlng = new google.maps.LatLng(location.LatLng);
var marker = new google.maps.Marker(latlng);
map.addOverlay(marker);
}
The JSON:
{
"locations": [
{
"Id": 1,
"Name": null,
"LatLng": "52.368, 4.806",
},
{
"Id": 2,
"Name": null,
"LatLng": "52.333, 4.839",
},
Ive tried debugging with Firebug but I get no errors. The coordinates seem to load just fine. But only 1 marker shows up, and that marker isn't actually attached to any coordinates it seems (if you zoom out it doesn't ajust). Also the map is very slow at this point. Does anyone know how to solve this?
1 Answer 1
try this out it works for me
function setupLocationMarker(map, location) {
console.debug(location.LatLng);
var point = new GLatLng(location.LatLng);
var marker = new GMarker(point);
map.addOverlay(marker);
};
hmmm here is a good strating point I use jquery you'll need to sub in your api key
see if you can get what you need from this
<script type="text/javascript" src="http://www.google.com/jsapi?key=your_Key_goes_here"></script>
<script type="text/javascript" charset="utf-8">
google.load("maps", "2.x");
google.load("jquery", "1.4.2");
</script>
<script>
$(document).ready(function(){
//setup the map
var map = new GMap2(document.getElementById('map'));
var state_college = new GLatLng(40.802,-77.833);
map.setCenter(state_college, 11);
var geo = new GClientGeocoder();
var reasons=[];
reasons[G_GEO_SUCCESS] = "Success";
reasons[G_GEO_MISSING_ADDRESS] = "Missing Address";
reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address.";
reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address";
reasons[G_GEO_BAD_KEY] = "Bad API Key";
reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries";
reasons[G_GEO_SERVER_ERROR] = "Server error";
var bounds = new GLatLngBounds();
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
var mapdata = {
"Locations":[
{
"id":"6",
"name":"Old Main",
"lat":"40.79648590088",
"lng":"-77.86285400391"
},
{
"id":"7",
"name":"Somewhere Further",
"lat":"42.65258026123",
"lng":"-73.75623321533"
}
]}
if (mapdata.Locations.length > 0) {
for (i=0; i<mapdata.Locations.length; i++) {
var location = mapdata.Locations[i];
addLocation(location);
}
zoomToBounds();
}
function addLocation(location) {
var point = new GLatLng(location.lat, location.lng);
var marker = new GMarker(point);
map.addOverlay(marker);
bounds.extend(marker.getPoint());
GEvent.addListener(marker, "click", function(){
showMessage(marker, location.name);
});
}
function showMessage(marker, text){
var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
$("#message").hide().fadeIn()
.css({ top:markerOffset.y, left:markerOffset.x })
.html(text);
map.panTo(marker.getLatLng());
}
function zoomToBounds() {
map.setCenter(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds)-1);
}
});
</script>
</head>
<body>
<div id="map"></div>
<ul id="list"></ul>
<div id="message" style="display:none;"></div>
</body>
answered Sep 16, 2010 at 12:46
mcgrailm
17.7k22 gold badges87 silver badges131 bronze badges
Sign up to request clarification or add additional context in comments.
3 Comments
Prd
Nothing changed for me :( I have also tried Google Maps v3 api but that gives me the same problem, except the map stays fast and it doesnt show any marker.
Prd
No sorry, the problem was that the coordinates were passed as a string where it should be a number. I converted the string to a number and everything works fine now.
mcgrailm
ohh so you did get it figured out, Good!
lang-js