I am loading multiple markers for 2 branches. I am not able to automatically open infowindow on load of the page?
var locations = [
['<strong>Info</strong><br /> Address', 40.004257, -105.253425, 2],
['<strong>Info</strong><br /> Address', 39.999326, -105.257662, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(40.00, -105.24),
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]),
icon: "images/favicon.png",
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Anything wrong with the code? Is there a fix to auto open infowindow?
Here's what I've done to load the infoWindows when you load the page.
function initMap() {
var locations = [
['<strong>Info</strong><br> Address', 40.004257, -105.253425, 2],
['<strong>Info</strong><br> Address', 39.999326, -105.257662, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(40.00, -105.24),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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
});
var infowindow = new google.maps.InfoWindow({
content:locations[i][0]
});
infowindow.open(map, marker);
}
}
try adding
infowindow.open(map,marker);
after the for loop.
maybe this one could help.
Google maps open info window by default?
Related
I need two Google maps on one page. Both of maps should have multiple pins on it. One map show hotels, another one restaurants. I tried to add pins and location names with javascript but all pins shows one location name.
This is html code for maps:
Hotels map:
<div id="map-accommodation" class="interactive-map" style="width: 100%; height: 500px;"></div>
Restaurants map:
<div id="map-food" class="interactive-map" style="width: 100%; height: 500px;"></div>
This is script code for maps:
Hotels map:
var locations = [
['Sheraton', 41.646230, 41.649160, 1],
['Hilton', 41.627184, 41.5991094, 2],
['Radisson', 41.6296321, 41.6002718, 3]
];
var map = new google.maps.Map(document.getElementById('map-accommodation'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
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]);
infowindow.open(map, marker);
}
})(marker, i));
}
Restaurants map:
var locations = [
['360 Cloud bar', 41.6472564, 41.6251435, 1],
['Sky bar', 41.6479619, 41.6275468, 2],
['Sky tower', 41.6479619, 41.6275468, 3]
];
var map = new google.maps.Map(document.getElementById('map-food'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
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]);
infowindow.open(map, marker);
}
})(marker, i));
}
So these maps show different locations, hotels map shows me only hotels, restaurants map shows me only restaurant pins, but all of them have one name - "sky tower".
Can you explain why and how can I fix it?
Use a unique array for each map (i.e. hotels, restaurants) and if you want each map to have its own InfoWindow (both maps currently share one InfoWindow), make a unique one of those as well.
var hotels = [
['Sheraton', 41.646230, 41.649160, 1],
['Hilton', 41.627184, 41.5991094, 2],
['Radisson', 41.6296321, 41.6002718, 3]
];
var map = new google.maps.Map(document.getElementById('map-accommodation'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < hotels.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(hotels[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var restaurants = [
['360 Cloud bar', 41.6472564, 41.6251435, 1],
['Sky bar', 41.6479619, 41.6275468, 2],
['Sky tower', 41.6479619, 41.6275468, 3]
];
var map = new google.maps.Map(document.getElementById('map-food'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
proof of concept fiddle
code snippet:
"use strict";
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
var hotels = [
['Sheraton', 41.646230, 41.649160, 1],
['Hilton', 41.627184, 41.5991094, 2],
['Radisson', 41.6296321, 41.6002718, 3]
];
var map = new google.maps.Map(document.getElementById('map-accommodation'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < hotels.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(hotels[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
var restaurants = [
['360 Cloud bar', 41.6472564, 41.6251435, 1],
['Sky bar', 41.6479619, 41.6275468, 2],
['Sky tower', 41.6479619, 41.6275468, 3]
];
var map = new google.maps.Map(document.getElementById('map-food'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
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
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Complex Marker Icons</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map-accommodation" class="interactive-map" style="width: 100%; height: 50%;"></div>
<div id="map-food" class="interactive-map" style="width: 100%; height: 50%;"></div>
</body>
</html>
How can I add labels to my two markers so that when you click on the marker it shows you more details about it and also how can I change the icon of the "Access Point 2" to a different marker
function initialize() {
var myLatlng = new google.maps.LatLng(-26.322402,31.142249),
map = new google.maps.Map(document.getElementById('google-map-default'), {
zoom: 14,
center: myLatlng
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
var accessPoint2 = new google.maps.LatLng(-26.316700,31.138043),
marker2 = new google.maps.Marker({
position: accessPoint2,
map: map,
title: "Access Point 2"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#google-map-default {
height: 200px;
}
<div id="google-map-default"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
the code above is in a file called maps.mini.js which is currently working fine. I just need to make modifications on it as specified above
Here is a probably more robust and extendable solution that makes use of an array holding your locations (markers), and a single InfoWindow object. With this, you can add as many locations as you need without having to duplicate the rest of the code...
function initialize() {
var myLatlng = new google.maps.LatLng(-26.322402, 31.142249);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: myLatlng
});
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var locations = [
[new google.maps.LatLng(-26.315402, 31.123924), 'Access Point 1', 'Custom text 1'],
[new google.maps.LatLng(-26.316700, 31.138043), 'Access Point 2', 'Custom text 2']
];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i][0],
map: map,
title: locations[i][1]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
For your marker1 you can
var my_contentString1 = 'my text content 1... ' ;
var my_infowindow1 = new google.maps.InfoWindow({
content: my_contentString1
});
var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
marker1.addListener('click', function() {
my_infowindow1.open(map, marker);
});
do the same for marker2
I ended up doing it this way which worked so well for me
<script type="text/javascript">
var locations = [
['ap7', -26.303139, 31.093508, 7],
['ap6', -26.322402, 31.142249, 6],
['ap5', -26.316700, 31.138043, 5],
['ap4', -26.315402, 31.123924, 4],
['ap3', -26.329244, 31.150478, 3],
['ap2', -26.309525, 31.134632, 2],
['ap1', -26.289923, 31.140195, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(-26.309525, 31.134632),
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]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
below is my code, where I've created a geolocation marker and a marker which the user can drag around the map.
I'm wondering what I need to do in order to keep the location of the dragged marker, if the user refreshes. Below is my code:
function initialize() {
var locations = [
['Your Hostel Is Here', 54.911615,-1.377025,],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(54.911615,-1.377025),
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,
draggable: true
});
localStorage.setItem('marker', marker);
var retrievedmarker = localStorage.getItem('marker');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to store the lat long value of a marker object in string, rather than the object. Furthermore, your need to listen to the marker mouseup event to store the marker value for later display.
Add this event:
//Record the new marker position
google.maps.event.addListener(marker, 'mouseup', function() {
localStorage.setItem('marker', marker.position.lat() + "," + marker.position.lng());
var retrievedmarker = localStorage.getItem('marker');
});
Edit the following code section:
//Get the last recorded marker position for display
var retrievedmarker = localStorage.getItem('marker');
mylatlng = retrievedmarker.split(",");
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
//position: new google.maps.LatLng(locations[i][1], locations[i][2]),
position: new google.maps.LatLng(mylatlng[0], mylatlng[1]),
map: map,
draggable: true
});
Note: I didn't check for the localStorage key existence, please make sure you check for it before the value retrieval.
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
In Google maps, I want to have buttons that will hide and show map markers, but I need to have multiple buttons, each with their own set of markers. For example, button 1 would show and hide markers 1 and 3, while button 2 would show and hide markers 2 and 4.
It's kinda hard for me cause I'm new in api v3.
Here is my code.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-8.762472, -63.887951),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP });
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.759662,-63.906489),
icon: predio});
var infowindow = new google.maps.InfoWindow({
content:contentimage})
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker); });
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.766159,-63.889567),
icon: yellow});
var infowindow1 = new google.maps.InfoWindow({
content:contentimage1})
google.maps.event.addListener(marker1,'click',function(){
infowindow1.open(map,marker1); });
}
You may like this
A Working Example Here.
function init()
{
// Icon urls for 4 icons
var bell="http://image1.png", cam="http://image2.png",
black="http://image3.png", green="http://image4.png";
// Image urls for 4 images
conimg1="http://contentImage1.jpg", conimg2="http://contentImage2.jpg",
conimg3="http://contentImage3.jpg", conimg4="http://contentImage4.jpg",
var map,
locations = [
[42.82846160000000000000, -76.53560419999997000000, bell, conimg1],
[43.65162010000000000000, -77.73558579999997000000, black, conimg2],
[44.75846240000000000000, -78.22252100000003000000, cam, conimg3],
[41.71773540000000000000, -75.74897190000002000000, green, conimg4]
],
myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i, markers=[];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map,
icon: locations[i][2],
visible:true
});
markers.push(marker)
google.maps.event.addListener(marker, 'click',(function(marker, i){
return function() {
var img="<img class='contentImage' src='"+locations[i][3]+"' />";
infowindow.setContent(img);
infowindow.open(map, marker);
}
})(marker, i));
}
var btn1=document.getElementById('btn1');
google.maps.event.addDomListener(btn1, 'click', function(){
if(markers[0].visible)
{
this.innerHTML="Show Icons (1 and 2)";
this.className="btn";
markers[0].setVisible(false);
markers[1].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (1 and 2)";
this.className="btn btn-primary";
markers[0].setVisible(true);
markers[1].setVisible(true);
}
});
var btn2=document.getElementById('btn2');
google.maps.event.addDomListener(btn2, 'click', function(){
if(markers[2].visible)
{
this.innerHTML="Show Icons (3 and 4)";
this.className="btn";
markers[2].setVisible(false);
markers[3].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (3 and 4)";
this.className="btn btn-primary";
markers[2].setVisible(true);
markers[3].setVisible(true);
}
});
}