Reputation: 55
I'm having an issue creating a markers in Google Maps.
I have a function in JS that getting a long string
locationlist look like that: "[{"Lat":"34.163291","Lng":"-118.685123"},{"Lat":"38.91992","Lng":"-76.992757"},{"Lat":"39.309265","Lng":"-76.749287"},{"Lat":"40.658113","Lng":"-74.005874"},{"Lat":"33.837814","Lng":"-117.886568"}]" ...... (Long String)
For each Lat,Lng in this string I want to create a marker and display it on the map Hope that someone can help me with that.
Also does it going to effect the speed that the map will load?? when loading bunch of markers at once!
JS Funcation:
var locationObj;
var historyObj;
function setMap(locationList) {
// List of Lat,Lng
locationObj = $.parseJSON(locationList);
//Looping through the Object
for (i in locationObj) {
var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);
// Getting the Lat,Lng frmo the object
var hItem = locationObj[i];
var qLat = parseFloat(hItem["Lat"]);
var qLong = parseFloat(hItem["Lng"]);
var qMapTypeId = google.maps.MapTypeId.SATELLITE
var myLatlng;
if (qLat != 0 && qLong != 0) {
myLatlng = new google.maps.LatLng(qLat, qLong);
mapOptions = {
zoom: 1,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.setTilt(45);
map.setHeading(0);
map.setMapTypeId(qMapTypeId);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, "click", function (event) {
});
}
}
$("#map-canvas").show();
$("#divLoadingMessageMap").css("display", "none");
}
Upvotes: 1
Views: 3587
Reputation: 2840
I have a answer.. on this question: Multiple markers and infowindows on Google Maps (using MySQL)
var lis_marker = new Array();
for (i = 0; i < locationObj.length; i++) {
var hItem = locationObj[i];
lis_marker[i] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"]),
title: 'Marker';
});
}
In this code you can see var data = markers[i]; ...
so markers[i] in your data is array of json
var hItem = locationObj[i];
var marker = new google.maps.Marker({
title: 'marker ',
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"])
});
try this I hope it help
Or If you don't want use array to save array marker... you can try this code
for (i = 0; i < locationObj.length; i++) {
var hItem = locationObj[i];
(function(hItem){
lis_marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"]),
title: 'Marker';
});
})(hItem);
}
jQuery allowed thread..
Upvotes: 0
Reputation: 31920
Your problem is you're looping over your list of locations, creating a new map for each one. 200 markers is no problem, but 200 maps isn't very good. Move the code creating the map outside of the loop:
function setMap(locationList) {
locationObj = $.parseJSON(locationList);
var qMapTypeId = google.maps.MapTypeId.SATELLITE
mapOptions = {
zoom: 1,
center: myLatlng, // this line won't work yet
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.setTilt(45);
map.setHeading(0);
map.setMapTypeId(qMapTypeId);
for (i in locationObj) {
var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);
var hItem = locationObj[i];
var qLat = parseFloat(hItem["Lat"]);
var qLong = parseFloat(hItem["Lng"]);
var myLatlng;
if (qLat != 0 && qLong != 0) {
myLatlng = new google.maps.LatLng(qLat, qLong);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, "click", function(event) {
});
}
}
$("#map-canvas").show();
$("#divLoadingMessageMap").css("display", "none");
}
The only problem here is you're going to have to give a lat/lng to your map options, which you don't have yet. There's various clever ways you can do this after you've added the markers, or you may already know a lat/lng you can use.
Upvotes: 2
Reputation: 492
From the Google Maps docs
The following fields are particularly important and commonly set when constructing a marker:
- position (required) specifies a LatLng identifying the initial location of the marker.
- map (optional) specifies the Map on which to place the marker. If you do not specify the map on construction of the marker, the marker is created but is not attached to (or displayed on) the map. You may add the marker later by calling the marker's setMap() method.
So you should set your map variable before creating your marker then upon creating your marker instead of
marker = new google.maps.Marker({
position: myLatlng
});
do
marker = new google.maps.Marker({
position: myLatlng
map: map
});
Upvotes: 0