I'm following this code for Multiple Markers in Google map, my problem is once I put my data in the map their info window are all in the wrong coordinates, they seem scrambled. I am using US as my center. So here is the code below:
var locations = [
['Russ Martin</br>Montana',43.299428,-74.217933],
['Carey Fischer</br>New York',46.879682,-110.362566],
['Brandon Born</br>Connecticut',40.714353,-74.005973],
['Joe Tocyloski</br>Pennysylvania',41.603221,-73.087749]
];
var us = new google.maps.LatLng(42.746632,-75.770041);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: us,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
/*icon:{
strokeColor:'green',
scale:3
},*/
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation:google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.close(map, marker);
}
})(marker, i));
console.log(locations);
}
Any help would be appreciated.
Fiddle
below statement may
this will surely help u
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, this);
}
Related
How to show infowindow on page load in google maps. It should automatically show the infowindow pop up. I have multiple markers in the google map. I need all markers info window should open in page load.
js fiddle link
https://jsfiddle.net/vq7zfbgj/
code:
var locations = [
[
"Market 1",
22.809999,
86.179999,
5,
"Market1",
"Market1",
"Market1",
"found"
],
[
"Market 2",
22.801111,
86.171111,
5,
"Market2",
"Market2",
"Market2",
"found"
]
]
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(22.803444, 86.179525),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
You can open multiple markers at once by initiating InfoWindow separately for each marker. I'd suggest removing the original var infowindow and doing the following within the for loop for each marker:
marker.infowindow = new google.maps.InfoWindow();
});
marker.infowindow.setContent(locations[i][0], locations[i][6]);
marker.infowindow.open(map, marker);
https://jsfiddle.net/vq7zfbgj/16/
I modified your fiddle to this and the infoWindow will open on page load. I add another marker just to ilustrate that could resolve more markers. Hope it helps.
for (i = 0; i < locations.length; i++) {
var infowindow = new google.maps.InfoWindow;
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], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
I cant get the ClustererMarker to work. I want markers to cluster when they are close to each other and I have found:
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, markers, mcOptions);
But I cant get them to work with my code, either all markers disappear or only one is visible (not in the correct way). I hope someone can help me with my problem.
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, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var gmarkers = [];
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, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);
This code working but when I mouse click each marker, Marker not Animation BOUNCE.
for(i=0; i<locations.length; i++) {
var position = new google.maps.LatLng(locations[i][2], locations[i][3]);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: new google.maps.MarkerImage(locations[i][5]),
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 500});
infowindow.open(map, marker);
}
animation: google.maps.Animation.BOUNCE
}) (marker, i));
Markers[locations[i][4]] = marker;
}
set the animation in the click-callback:
return function() {
//set the animation
this.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 500});
infowindow.open(map, marker);
}
I am using Google Map to display multiple lat/long points.
But the Google map Javascript code has the code snippet to track the center of lat/long of the available lat/long.
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>'); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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][2], locations[i][3]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
In Above code the line
center: new google.maps.LatLng(),
needs a lat/long pair which could be the center point of multiple lat/long to be displayed.
How could that be done?
This works. See the documentation of Map.fitBounds and LatLngBounds for details:
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>');//alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2],locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
</script>
code snippet:
var locations = JSON.parse(
JSON.stringify([
['AAA', 'BBB', 42, -72],
['BBB', 'CCC', 42.1, -72.2]
])); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
You should get the bounds of your added markers with the function map.getBounds().
It returns an object on which you can get the center bound.getCenter().
See Find center of multiple locations in Google Maps
I am creating a map with 5 groups of markers. I have all the coordinates in place and the markers appear on the map, but I am not sure how to change the image for each group. I have looked at other examples, but they have not worked for me. If there is a way to change the image for either the group of coordinates or each individual coordinate, I would appreciate the help.
Here is what I have so far:
<script type="text/javascript"> function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(31.5603, -91.4031),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//add locations
var cottages = [
['Savannah Cottage<br />412 S.Pearl Street', 31.55600224874313, -91.4073497056961] ];
var restaurants = [
['Cotton Alley Cafe<br />208 Main Street<br />(601)442-7452<br />Website', 31.561075,-91.40503100000001]
];
var bars = [
['Under-the-Hill Saloon', 31.559589, -91.41074700000001]
];
var tours = [
['Auburn Antebullum Home<br />400 Duncan Avenue<br />(601)442-5981', 31.5457833, -91.39274319999998]
];
var spas = [
['Anruss & Co Salon and Spa<br />212 North Commerce Street<br />(601) 445-2007<br />Website', 31.561061,-91.40116799999998]
];
//declare marker call it 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow();
//add marker for COTTAGES
for (i = 0; i < cottages.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(cottages[i][1], cottages[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(cottages[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for RESTAURANTS
for (i = 0; i < restaurants.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for BARS
for (i = 0; i < bars.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(bars[i][1], bars[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(bars[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for TOURS
for (i = 0; i < tours.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(tours[i][1], tours[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(tours[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for SPAS
for (i = 0; i < spas.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(spas[i][1], spas[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(spas[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm not sure exactly what you have in mind but here's some code that may help :
function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(31.5603, -91.4031),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//create infowindow
var infowindow = new google.maps.InfoWindow();
//add locations (as in the question)
var cottages = [...];
var restaurants = [...];
var bars = [...];
var tours = [...];
var spas = [...];
//Make an array that lists all the locations arrays.
var allLocations = [cottages, restaurants, bars, tours, spas];
//Define a generalized click handler for all markers.
//ie. one handler, not one per marker.
function clickMarker() {
var data = this.data;
infowindow.setContent(data.category[data.index][0]);
infowindow.open(map, this);
//HERE, you can loop through `data.category.markers` and
//do whatever is necessary to each marker in the category
//eg change their icons.
for(var i=0; i<data.category.markers.length; i++) {
var url = ...;//expression that determines which marker icon to use
data.category.markers[i].setIcon(url);
}
}
//Now loop through all the markers arrays and add markers to the map
for (var i=0; i<allLocations.length; i++) {
var arr = allLocations[i];
//Create an associated array in which to store references to category's markers
arr.markers = [];
for (var marker, j=0; j<arr.length; j++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(arr[j][1], arr[j][2]),
map: map
});
arr.markers[j] = marker;
//This allows the click hander to be generalized,
//and for each marker to have a reference back
//to its category array, and its own index.
marker.data = {
category: arr,
index: j
};
google.maps.event.addListener(marker, 'click', clickMarker);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
See comments in code.