I'm trying to find MY MISTAKE in my code:
I want to add to maps to the same script file and I was able to do that with a conditional statement but, when I get to the part of the locations and markers, I'm not able to display my pins, my info windows, and icons.
Here's my code:
var map, locs;
function initMap() {
if (document.getElementById('map')) {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 01, lng: -01},
zoom: 15
});
var image = 'http:myimage.png';
var locations = [
['<div class="OzwZjf-jRmmHf-MZArnb-KDwhZb fO2voc-jRmmHf-LJTIlf"><p>My Location</p>' 49.27597, -123.1185, 1]];
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,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
} else if (document.getElementById('locs')) {
locs = new google.maps.Map(document.getElementById('locs'), {
center: {lat:02, lng: -02},
zoom: 4
});
var image = 'http:myimage.png';
var locations_two = [
['<div class="OzwZjf-jRmmHf-MZArnb-KDwhZb fO2voc-jRmmHf-LJTIlf"><p>My Location</p>' 02, -02, 1]];
var infowindow = new google.maps.InfoWindow();
var marker_two, i;
for (i = 0; i < locations_two.length; i++) {
marker_two = new google.maps.Marker({
position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker_two, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations_two[i][0]);
infowindow.open(map, marker);
}
})(marker_two, i));
}
}
}
google.maps.event.addDomListener(window, "load", initMap);
#map {height: 500px;}
#locs {height: 500px;}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"><div>
<div id="locs"><div>
Both maps are in a different page, I'm able to see only the first one with locations, the second one come without location, markers and info windows.
Change
marker_two = new google.maps.Marker({
position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
map: map,
icon: image
});
to
marker_two = new google.maps.Marker({
position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
map: locs,
icon: image
});
You need to use locs because that is the second map object that you create and that is what you need to pass while creating the marker instead of map.
Also 01, 02 are not valid float values. You need to change them to 1, 2 which will make them valid float numbers.
Related
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>
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?
I am trying to use optimize:false parameter in my code to use animated gif as a mouseover:
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
visible: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
when I use for example:
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,
visible: false,
icon: icon2, //here I purposely changed it to animated gif first
optimize: false
});
I have no problems.
but when I try to use the same here:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
optimize:false;// here is the wrong code obviously
}
})(marker, i));
I get the image disappearing not animating
Please suggest solution
based on the suggestions posted by the #geocoder here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html,
body,
#map-canvas{
width: 100%;
margin: 0px;
padding: 0px;
height: 880px;
z-index:2
}
#maptwo {
z-index:1
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
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][1], locations[i][2]),
map: map,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom >= 11);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Location1', 39.031586, 46.590031, 5],
['Location2', 38.998439, 46.557591, 4],
['Location3', 38.913429, 46.547370, 3],
['Location4', 39.090245, 46.703794, 2],
['Location5', 39.130588, 46.696239, 1]
];
//here I create a function that will show/hide layers that are defined by the latLng values
function toggleLayer(firLayer, id) {
if ($('#' + id).is(':checked')) {
firLayer.setMap(map);
} else {
firLayer.setMap(null);
}
}
//this is the end of the function
// Fir AZE is one of the many layers that are drawn
drawAZE = new google.maps.Polygon({
path: firAZE,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CCFF',
fillOpacity: 0.15
});
//end of FirAZE end of layer
// Add a listener for the drawAZE mouseover/mouseout event.
google.maps.event.addListener(drawAZE ,'mouseover',function(){
this.setOptions({fillColor: "#FF0000"},{fillOpacity:"0.8"});
});
google.maps.event.addListener(drawAZE ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"},{fillOpacity:"0.5"});
});
//end of drawAZE listener
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="maptwo"></div>
<input id="fir_azerbaijan" type="checkbox" onClick="toggleLayer(drawAZE,'fir_azerbaijan')" /> AZERBAIJAN
</body>
</html>
as you can see the code in "Fir AZE" draws a layer.
then later it(the drawn layer) is supposed to be shown on click , the example provided initially at this link www.visualguide.ca/example shows that.
when I was asking about the solution for the animated marker I thought that I had problem with optimize :false - because all their lines of code were working ok.
as I have tried to implement solution provided below it worked! but I lost my ability to show/hide layers on click.sorry if this was not clear initially
my intial code was:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.222869, 47.602673),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zIndex: 3
};
// Set map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
it was changed to
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
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][1], locations[i][2]),
map: map,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
//....
}
map.fitBounds(bounds);
}
I have compared line by line to locate this, and am stumbled.
One option is to create the marker with {optimized: false}:
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,
optimized: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
code snippet with animated gif:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
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][1], locations[i][2]),
map: map,
optimized: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['palace', 52.231871, 21.005841],
['arkadia', 52.257305, 20.984481],
['stadium', 52.215147, 21.035074]
];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
somehow I have managed(with the help of geocoder and Alex - thanks
//announce my variables
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
optimized:false, // <-- required for animated gif
visible: false,
icon: icon1
});
I also managed to have my layers appearing on click
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