Develop Reference

Google Maps with multiple markers in Bootstrap Modal

I'm trying to display a Google map in a Bootstrap modal with multiple markers. I have found several posts where people were having problems displaying the map on the modal with just one marker, but none with multiple markers. This is what I currently have, but my map is just showing up gray.
var locations = [...]
var complexMap = new google.maps.Map(document.getElementById('complexes-modal-map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][3],
map: complexMap
});
//extend the bounds to include each marker's position
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(complexMap, marker);
}
})(marker, i));
}
$("#complexes-modal-map-canvas").on("shown.bs.modal", function () {
var currentCenter = complexMap.getCenter();
google.maps.event.trigger(complexMap, "resize");
complexMap.setCenter(currentCenter);
complexMap.fitBounds(bounds);
});

There are 2 things I had to do to make this work. The first thing was an obvious mistake - I was selecting the incorrect element on the "shown.bs.modal" method. I needed to select my Bootstrap modal, not the Google Map. The second thing was to call the "fitBounds" method before calling the "resize" event and setting the center.
$("#complexes-modal").on("shown.bs.modal", function () {
complexMap.fitBounds(bounds);
var currentCenter = complexMap.getCenter();
google.maps.event.trigger(complexMap, "resize");
complexMap.setCenter(currentCenter);
});

Google map markers are not displaying with ajax json data

I am getting latitude & longitude from database table and trying to display markers on ajax success. I am getting latitude & longitude on json format but when tried with loop, markers are not displaying.
My JSON Data:
[
{"latitude":"23.046100780353495","longitude":"72.56860542227514"},
{"latitude":"23.088427701737665","longitude":"72.49273109366186"},
{"latitude":"23.061264193197644","longitude":"72.68224525381811"},
{"latitude":"22.977212139977677","longitude":"72.52191352774389"},
{"latitude":"23.002180435752084","longitude":"72.47590827872045"},
{"latitude":"23.108638843843046","longitude":"72.49444770743139"}
]
Google map with Ajax Code:
<script type="text/javascript">
// Check DOM Ready
$(document).ready(function() {
// Execute
(function() {
// Map options
var options = {
zoom: 6,
center: new google.maps.LatLng(23.039567700000000000, 72.566004499999960000), // Centered
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// Init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
$.ajax({
url: 'get-locations.php',
success:function(data){
var obj = JSON.parse(data);
var totalLocations = obj.length;
for (var i = 0; i < totalLocations; i++) {
// Init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(obj[i].latitude + ',' + obj[i].longitude),
map: map,
title: 'Click Me ' + i
});
// Process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: 'Hello, World!!'
});
infowindow.open(map, marker);
});
})(marker, i);
}
}
});
})();
});
</script>
When I tried to pass static latitude & longitude inside the loop marker is displayed:
position: new google.maps.LatLng(23.046100780353495,72.56860542227514),
but not working with dynamic with loop.
Any idea why markers are not displaying?
Thanks.

You're passing the coordinates incorrectly to the google.maps.LatLng constructor. There should be two parameters separated by a comma but you're concatenating them as a string.
The code should look like this:
position: new google.maps.LatLng(obj[i].latitude, obj[i].longitude)

Google Maps MarkerClusterer either doesn't work or hides all markers

...depending on where I put the line
var mc = new markerclusterer(map);
If it goes where the examples seem to suggest - right after "var map" is introduced - all the markers disappear (example running here).
A version without the mc variable runs with all markers visible.
When the mc variable is introduced after the google.maps.event.addListener function as shown here, it seems also to cancel its effect and markers are shown.
The locations variable is an array containing geolocation data and ready-formatted HTML (produced in a spreadsheet) for all points on the map, which is passed to the markers to place them.
I think the issue may be that to be used with the markerclusterer the array is referring to the geolocation data, when it should refer to markers? I've seen other people using a variable markerarray, but I'm worried if I mess with it I'll break the html and geolocation extraction part of the code.
Can anyone help explain why var mc is failing? I've loaded http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js in the header, so it should work and I can't see any syntax errors in my code.
This is the first thing I've made with JS and it's great but I just want to finish it off with the marker clusters now ! Help would be much appreciated.
EDIT: I also tried playing with this but like I say the array here is two-fold to my understanding, so I couldn't get it to work:
The suggestion:
...
var infowindow = new google.maps.InfoWindow();
var marker, i;
map.markers = []; // ADD THIS LINE
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
map.markers.push(marker); // ADD THIS LINE
...
Snippet of my code:
...
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
...

You have 2 problems.
you never add your markers to the MarkerClusterer
var markers=[];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
var mc = new MarkerClusterer(map, markers);
markerclusterer has the incorrect case (javascript is case sensitive), it should be MarkerClusterer.
working example

markerclusterer is not the correct casing.
the object is "MarkerClusterer"
JavaScript is case sensitive!
The samples also look slightly different then your code:
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
for example

Google Maps Api v3 Firefox bug in Info Bubble

I implemented the api 3 in wordpress with an external js and an action hook. It all works fine except in firefox, part of the info text does not display in the info box. See the screenshot here. It works fine in other browsers.
Here is my complete source code (or on pastebin):
var markers = [
['Shippensburg University',
40.06090, -77.52148],
['Millersville University',
39.99680, -76.35440],
['Kutztown University', 40.50980, -75.78410],
];
function initialize() {
var latlng = new google.maps.LatLng(40.9, -77.5);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("gmap"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: '../university.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
I used an array for the markers. Thanks!

It is an issue (or designed behavior, though why that would differ with Firefox is hard to explain) with the "experimental" version. If I set the "release" version
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3"></script>
It shows the complete text.

Google Map markers - add a custom icon with a unique label for each marker

I have implemented a google map with multiple markers but what i am failing to do is how to add a unique label for each marker i.e. Each marker needs have a letter:e.g.
Marker 1 needs to display 'A'
Marker 2 needs to display 'B'
Marker 3 needs to display 'C'
Marker 4 needs to display 'D'
...
an example of what i am trying to achieve is: http://www.athenos.com/locator/ --- enter 11205 in the zip search
here is a portion of my map code - my init and add_marker methods:
init : function() {
var self = this;
// set map property
var map = new google.maps.Map(self.dom_element, self.options);
self.map = map;
// set some other shit
new google.maps.Size(95, 77),
new google.maps.Point(0,0),
new google.maps.Point(47, 76);
// creating new bounds
var bounds = new google.maps.LatLngBounds();
// for loop to iterate through locations
for (var i = 0; i < self.locations.length; i++) {
// extend the bounds
bounds.extend(self.locations[i].latlng);
// add the marker
self.add_marker(self.locations[i].latlng, i);
}
// centers the map based on the existing map markers
self.map.fitBounds(bounds);
},
add_marker : function(latlng, marker_index) {
var self = this;
var marker = new google.maps.Marker({
position: latlng,
map: self.map,
icon: self.map_icon,
zIndex: 998,
id: marker_index // give the marker an ID e.g. 0, 1, 2, 3 - use this for indexing the listed venues
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
var this_marker = this;
// executes handler and passes the marker as 'this' and event data as an argument
self.handle_marker_mouseover.call(self, this, event);
this_marker.setZIndex(999);
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
// executes handler and passes the marker as 'this' and event data as an argument
self.handle_marker_mouseout.call(self, this, event);
});
google.maps.event.addListener(marker, 'click', function(event) {
// executes handler and passes the marker as 'this' and event data as an argument
self.handle_marker_click.call(self, this, event);
});
},
...
Please help.
Thanks in advance

just try to locate your icon, in marker's prop, at this url:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|00FF00|000000
So iterate with letters over the first part of the chld querystring parameter, and don't forget to choose your marker's color (latest two part, pipe separated)

Take a look at the article below. It's very simple. Use a marker with numeric labels or a marker with alphabet label (A,B..)
Multiple marker with labels in google map
for (i = 1; i <= markers.length; i++) {
var letter = String.fromCharCode("A".charCodeAt(0) + i - 1);
var data = markers[i - 1]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
Go to this article for more details
Multiple marker with labels in google map