I have just a simple question about the jQuery Google Maps code.
I've added a marker to a map and the infowindow doesn't show up on start, only after mousehover.
Here is the code:
(function ($) {
var map;
var lat = XX.XXXXXX;
var lng = X.XXXXX;
var htmlcontent = 'CONTENT';
$(document).ready(function(){
if ( document.getElementById("map") ) {
map = new GMaps({
el: '#map',
lat: lat,
lng: lng,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : true,
streetViewControl : false,
mapTypeControl: true,
overviewMapControl: true
});
var marker = map.addMarker({
lat: lat,
lng: lng,
title: 'THE TITLE',
infoWindow: {
content: htmlcontent
},
mouseover: function(e){
this.infoWindow.open(this.map, this);
}
});
marker.infoWindow.open(map.self, marker);
map.setCenter(XX.XXXXXX, X.XXXXXX);
};
});
})(jQuery);
So, this is the part where I have problems with:
marker.infoWindow.open(map.self, marker);
It worked well, a few weeks (or months) ago.
I will get this error in the console
infowindow.js:4 Uncaught TypeError: Cannot read property 'get' of undefined
and this warning
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
How to fix the infowindow of the marker?
Edit: I set the center of the marker individually because the popup of the marker isn't centered at all.
Edit2: Added API keys, no error or warning, but the infowindow of the marker won't show up at start
The google.maps.Map object is map.map:
code snippet:
(function($) {
var map;
var lat = 42;
var lng = -72;
var htmlcontent = 'CONTENT';
$(document).ready(function() {
if (document.getElementById("map")) {
map = new GMaps({
el: '#map',
lat: lat,
lng: lng,
zoomControl: true,
zoomControlOpt: {
style: 'SMALL',
position: 'TOP_LEFT'
},
panControl: true,
streetViewControl: false,
mapTypeControl: true,
overviewMapControl: true
});
var marker = map.addMarker({
lat: lat,
lng: lng,
title: 'THE TITLE',
infoWindow: {
content: htmlcontent
},
mouseover: function(e) {
this.infoWindow.open(this.map, this);
}
});
marker.infoWindow.open(map.map, marker);
map.setCenter(42, -72);
};
});
})(jQuery);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Related
So I have 4 maps all together on one page. I have them all working through the for loop. Now I need to add markers/ Infowindows any idea the best way to add that into the loop, thanks!
// array of lat and lng locations
let locations = [
{
lat:-33.91722,
lng:151.23064
},
{
lat:22.3193,
lng:114.1694
},
{
lat:22.3255,
lng:114.3532
},
{
lat:23.3532,
lng:115.1234
}
];
let elements = ['maps', 'map-rec-one', 'map-rec-two', 'map-rec-three']; // array of html element ids
window.addEventListener('load',
function() {
for (i = 0; i < elements.length; i++) {
initMap(locations[i], elements[i]);
console.log(elements[i]);
console.log(locations[i])}
}, false);
function initMap(location, element) {
console.log(location)
console.log(element)
map = new google.maps.Map(document.getElementById(element), {zoom:4, center: location});
}
One option would be to add the information for the markers to your array.
(if you want the same markers on each map, you can simplify the array or have a separate array for the markers)
let locations = [{
lat: -33.91722,
lng: 151.23064,
markers: [{
lat: -33.91722,
lng: 151.23064,
info: "this is a marker at -33.91722,151.23064"
}, {
lat: -33.8722,
lng: 151.03064,
info: "this is a marker at -33.8722,151.03064"
},
{
lat: -33.5722,
lng: 151.03064,
info: "this is a marker at -33.5722,151.03064"
}
]
},
{
lat: 22.3193,
lng: 114.1694,
markers: [{
lat: 22.3193,
lng: 114.1694,
info: "this is a marker at 22.3193,114.1694"
}]
},
{
lat: 22.3255,
lng: 114.3532
},
{
lat: 23.3532,
lng: 115.1234
}
];
Then in your initMap function, add those markers to the map:
function initMap(location, element, infowindow) {
console.log(location)
console.log(element)
map = new google.maps.Map(document.getElementById(element), {
zoom: 4,
center: location
});
if (location.markers) {
for (var i = 0; i < location.markers.length; i++) {
createMarker(location.markers[i], map, infowindow);
}
}
}
createMarker function:
function createMarker(location, map, infowindow) {
let marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(location.info);
infowindow.open(map, marker);
})
}
proof of concept fiddle
code snippet:
// 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 initialize() {
// array of lat and lng locations
let locations = [{
lat: -33.91722,
lng: 151.23064,
markers: [{
lat: -33.91722,
lng: 151.23064,
info: "this is a marker at -33.91722,151.23064"
}, {
lat: -33.8722,
lng: 151.03064,
info: "this is a marker at -33.8722,151.03064"
},
{
lat: -33.5722,
lng: 151.03064,
info: "this is a marker at -33.5722,151.03064"
}
]
},
{
lat: 22.3193,
lng: 114.1694,
markers: [{
lat: 22.3193,
lng: 114.1694,
info: "this is a marker at 22.3193,114.1694"
}]
},
{
lat: 22.3255,
lng: 114.3532
},
{
lat: 23.3532,
lng: 115.1234
}
];
let elements = ['maps', 'map-rec-one', 'map-rec-two', 'map-rec-three']; // array of html element ids
window.addEventListener('load',
function() {
for (i = 0; i < elements.length; i++) {
initMap(locations[i], elements[i], new google.maps.InfoWindow());
console.log(elements[i]);
console.log(locations[i])
}
}, false);
function initMap(location, element, infowindow) {
console.log(location)
console.log(element)
map = new google.maps.Map(document.getElementById(element), {
zoom: 4,
center: location
});
if (location.markers) {
for (var i = 0; i < location.markers.length; i++) {
createMarker(location.markers[i], map, infowindow);
}
}
}
function createMarker(location, map, infowindow) {
let marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(location.info);
infowindow.open(map, marker);
})
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#maps,
#map-rec-one,
#map-rec-two,
#map-rec-three {
height: 100%;
width: 25%;
float: right;
}
/* 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=initialize&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="maps"></div>
<div id="map-rec-one"></div>
<div id="map-rec-two"></div>
<div id="map-rec-three"></div>
</body>
</html>
I have 2 markers on a map. I want to make those two markers visible on the map when some event happens. But when I add restriction option on map fitBounds does not show markers. When I remove restriction option it seems to work correctly.
Here is the sample code:
var map, markers;
var locations = [{
lat: 50.8503396,
lng: 4.351710300000036
},
{
lat: 49.9570366,
lng: 36.3431478
},
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: {
lat: -28.024,
lng: 140.887
},
restriction: {
strictBounds: true,
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
},
},
});
markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location
});
});
markers.forEach(function(marker) {
marker.setMap(map);
});
}
setTimeout(function() {
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(marker) {
bounds.extend(marker.position);
});
map.fitBounds(bounds);
}, 5000);
#map {
height: 400px;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
https://jsfiddle.net/fedman/6eoty0vm/
While this bug of google.maps.api still exists you can set map center to bounds center as a workaround.
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
This looks like a bug. It works fine with version 3.34 of the API as shown in the code below. Seems to work also fine depending on the map container height (tried with a height of 200px and it worked even with the latest versions).
I have opened a bug in the issue tracker.
var map, markers;
var locations = [{
lat: 50.8503396,
lng: 4.351710300000036
},
{
lat: 49.9570366,
lng: 36.3431478
},
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: {
lat: -28.024,
lng: 140.887
},
restriction: {
strictBounds: true,
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
},
},
});
markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location
});
});
markers.forEach(function(marker) {
marker.setMap(map);
});
}
setTimeout(function() {
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(marker) {
bounds.extend(marker.position);
});
map.fitBounds(bounds);
}, 5000);
#map {
height: 400px;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.34&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
I am using the google maps api and using grid clustering for the markers. I wanted to know if there is a way to exclude a single marker from clustering. I want a "You are here" marker that is always visible. I tried using a different array for just that marker and not including it the cluster function but that didn't work.
Does anyone have a solution for this?
Here is how i am doing the clustering
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [], markers_data = [], markers_data2 = [], fred, clust1, markss;
you_are_here.push({
lat : Geo.lat,
lng : Geo .lng,
animation: google.maps.Animation.DROP,
title : 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
}
});
function loadResults (data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++)
{
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined)
{
markers_data.push({
lat : item.Lat,
lng : item.Lng,
title : item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map.addMarkers(markers_data);
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 10,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50
}
clust1 = new MarkerClusterer(map,[], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(you_are_here);
The GMaps clusters all the markers you add to it with the addMarker method (if you provide a MarkerClusterer).
One option: add your "special" marker (the one that you don't want clustered) to the map manually, so it isn't added to the MarkerClusterer:
The GMaps.map property is a reference to the Google Maps Javascript API v3 map object. So this will add a marker to the map without letting the GMaps library know about it:
you_are_here = new google.maps.Marker({
position: {lat: Geo.lat,lng: Geo.lng},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
map: map.map
});
proof of concept fiddle
code snippet:
var Geo = {
lat: 40.7281575,
lng: -74.07764
};
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [],
markers_data = [],
markers_data2 = [],
fred, clust1, markss;
function loadResults(data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined) {
markers_data.push({
lat: item.Lat,
lng: item.Lng,
title: item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 8,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50,
imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
}
clust1 = new MarkerClusterer(map, [], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(markers_data);
you_are_here = new google.maps.Marker({
position: {
lat: Geo.lat,
lng: Geo.lng
},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
},
map: map.map
});
// map.addMarkers(you_are_here);
}
loadResults(data);
});
var data = {
map: [{
Lat: 40.7127837,
Lng: -74.005941,
Site: "New York, NY",
distance: 1
}, {
Site: "Newark, NJ",
Lat: 40.735657,
Lng: -74.1723667,
distance: 2
}]
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<input id="mapbut" type="button" value="map" />
<div id="map"></div>
To get around this is relatively simple, just after I send the markers array to MarkerClusterer I then add my location.
// Setup cluster markers
var markerCluster = new MarkerClusterer( gmap.map, options )
// add my location
gmap.addMarker({
lat: data.latitude,
lng: data.longitude
...
})
Thanks
This is the script I'm using.
<script>
var user_lat, user_lng;
var map;
var url = "./rest/network";
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17,
lng: 80
},
zoom: 5
});
$.post(url,function(data,successStatus){
$.each(data, function(index, value) {
new google.maps.Marker({
position: value,
draggable: false,
map: map,
title: "cab"
});
});
});
}
</script>
The url returns [{lat:12.74711089,lng:79.98483278},{lat:18.0,lng:80.0},{lat:19.0,lng:78.0}]
Again when I use this code its working
<script>
var user_lat, user_lng;
var map;
var url = "./rest/network";
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17,
lng: 80
},
zoom: 5
});
var data = [{lat:12.74711089,lng:79.98483278},
{lat:18.0,lng:80.0},
{lat:19.0,lng:78.0}];
$.each(data, function(index, value) {
new google.maps.Marker({
position: value,
draggable: false,
map: map,
title: "cab"
});
});
}
</script>
If the array format is the problem, then the second code also shouldn't work. But it is working. I'm not knowing the reason behind the problem. Is there any problem with the ajax call?
im using hpneo gmaps plugin: http://hpneo.github.io/gmaps/
and i want to use multiple maps with different locations, now i have this code, but it shows only the first map
/* Google map */
var map1;
$(document).ready(function(){
prettyPrint();
map1 = new GMaps({
div: '#map',
scrollwheel: false,
lat: 54.7181780,
lng: 25.2204530,
zoom: 16
});
map1.addMarker({
lat: 54.7181780,
lng: 25.2204530,
title: 'II "Meistrus" ',
icon: '/images/marker.png'
});
});
/* Vilnius */
var map2;
$(document).ready(function(){
prettyPrint();
map2 = new GMaps({
div: '#vilnius',
scrollwheel: false,
lat: 54.8900070,
lng: 23.9255120,
zoom: 10
});
map2.addMarker({
lat: 54.8900070,
lng: 23.9255120,
title: 'II "Meistrus" ',
icon: '/images/marker.png'
});
});
Here is fiddle code: http://jsfiddle.net/337T7/ - works fine, but if i want to display only the "vilnius" map and remove the <div id="map" class="map"></div> no one maps are displayed.
What im doing wrong?
You should be checking whether the div exists before you try to call a function on it. The most simple way to do so is by placing the code within
if(document.getElementById('map)){
//your code
}
Also, I think it would be good practice to put both chunks of code into one single document.ready
So the resulting code would be something like this:
var map1, map2;
$(document).ready(function(){
prettyPrint();
if(document.getElementById('map')){
map1 = new GMaps({
div: '#map',
scrollwheel: false,
lat: 54.7181780,
lng: 25.2204530,
zoom: 16
});
map1.addMarker({
lat: 54.7181780,
lng: 25.2204530,
title: 'II "Meistrus" ',
icon: '/images/marker.png'
});
}
if(document.getElementById('vilnius')){
prettyPrint();
map2 = new GMaps({
div: '#vilnius',
scrollwheel: false,
lat: 54.8900070,
lng: 23.9255120,
zoom: 10
});
map2.addMarker({
lat: 54.8900070,
lng: 23.9255120,
title: 'II "Meistrus" ',
icon: '/images/marker.png'
});
}
});
I believe it would be more elegant to not have the code related to one of the maps executed if the div isn't actually in the HTML by another way than by testing if the div if there. But I don't know how the structure of your project is.
Since the div isn't there, the first call is throwing an error, which is canceling the remaining call. You'll want to check if the div is present: http://jsfiddle.net/337T7/1/
/* Google map */
var map1;
$(document).ready(function(){
if ($('#map').length) {
prettyPrint();
map1 = new GMaps({
div: '#map',
scrollwheel: false,
lat: 54.7181780,
lng: 25.2204530,
zoom: 16
});
map1.addMarker({
lat: 54.7181780,
lng: 25.2204530,
title: 'II "Meistrus" ',
icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png'
});
}
});
/* Vilnius */
var map2;
$(document).ready(function(){
if ($('#vilnius').length) {
prettyPrint();
map2 = new GMaps({
div: '#vilnius',
scrollwheel: false,
lat: 54.8900070,
lng: 23.9255120,
zoom: 10
});
map2.addMarker({
lat: 54.8900070,
lng: 23.9255120,
title: 'II "Meistrus" ',
icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png'
});
}
});