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'
});
}
});
Related
I have a simple google maps map and when I click on it I want an alert to be triggered:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
const triangleCoords = [
{ lat: -34.397, lng: 150.644 },
{ lat: -33.5, lng: 152 },
{ lat: -34.4, lng: 149 },
];
const triangle = new google.maps.Polygon({
paths: triangleCoords,
});
triangle.setMap(map);
google.maps.event.addListener(map, "click", (e) => {
alert('there was a click')
const result = google.maps.geometry.poly.containsLocation(
e.latLng,
triangle
);
if(result)alert('inside triangle')
else alert('outside triangle')
});
}
fiddle
However, when I click on the polygon, the event doesn't get triggered, the alert is not firing. Outside of the polygon it does work.
What am I doing wrong?
The google.maps.Polygon captures click when it is "clickable" (defaults to true). If you set clickable:false, the map click listener function will run. From the documentation:
clickable optional
Type: boolean optional
Indicates whether this Polygon handles mouse events. Defaults to true.
Related question: Cant GetPosition in Overlay Polygon Zone
(the other option would be to leave the Polygon as clickable:true, but add the same event listener to the Polygon)
proof of concept fiddle
code snippet:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8,
});
const triangleCoords = [{
lat: -34.397,
lng: 150.644
},
{
lat: -33.5,
lng: 152
},
{
lat: -34.4,
lng: 149
},
];
const triangle = new google.maps.Polygon({
paths: triangleCoords,
clickable: false
});
triangle.setMap(map);
google.maps.event.addListener(map, "click", (e) => {
alert('there was a click')
const result = google.maps.geometry.poly.containsLocation(
e.latLng,
triangle
);
if (result) alert('inside triangle')
else alert('outside triangle')
/* console.log(result) */
});
}
/* 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>Simple Map</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"></div>
</body>
</html>
I have file foo.ftl
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: {lat: 20.993514917846174, lng: 105.78660475957122},
});
// const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const labels = [
"The Light Trung Văn",
"Khu đô thị Mulbery Lane",
"Nhà thờ giáo xứ Phùng Khoang",
"Khỏe đẹp 24h"];
const locations = [
{ lat: 20.9935851166474, lng: 105.78857910579417 },
{ lat: 20.986910834987295, lng: 105.78535398147808 },
{ lat: 20.990339683019226, lng: 105.7922698253056 },
{ lat: 20.996770381033244, lng: 105.79321396285934 }
];
const markers = locations.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
});
});
new MarkerClusterer(map, markers, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
const ecolife = {lat: 20.993514917846174, lng: 105.78660475957122};
// const map22 = new google.maps.Map(document.getElementById("map"), {
// zoom: 18,
// center: ecolife,
// });
// const marker = new google.maps.Marker({
// position: ecolife,
// map: map22,
// });
}
</script>
I see HTML source of web-page
Encoding in text editor
but still error font UTF-8
How to display text in UTF-8 correctly?
This is a defect of FreeMarker
<#ftl encoding="utf-8">
See https://freemarker.apache.org/docs/pgui_misc_charset.html#autoid_52
I've created a map with multi markers from a JSON file. I'm trying to add a marker cluster, but I'm ending up with the cluster and markers showing at the same time.
This is what I see at the moment:
I've added the script below to my index.html page:
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
This is the relevant part of my maps.js file:
let map;
let jsonData = "assets/Data/maps.json";
const countries = [
{ lat: 48.857497, lng: 2.347628, zoom: 5, name: "France" },
//Brazil
{ lat: -15.793889, lng: -47.882778, zoom: 5, name: "Brazil" }
];
function initMap() {
const mapOptions = {
center: {
lat: 9.072264,
lng: 7.491302
},
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
countries.forEach(function (data) {
let countriesMarker = new google.maps.Marker({
map: map,
position: { lat: data.lat, lng: data.lng },
title: data.name
});
$("#selectlocation").append('<option value="' + [data.lat, data.lng, data.zoom].join('|') + '">' + data.name + '</option>');
});
let infowindow = new google.maps.InfoWindow();
//Method found on StackOverflow: https://stackoverflow.com/questions/28606149/load-data-from-json-file-into-map-markers-in-google-maps
$.getJSON(jsonData, function (jsonMarkers) {
$.each(jsonMarkers.markers, function (key, data) {
let latLng = new google.maps.LatLng(data.lat, data.lng);
let marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
var clusterMarkers = jsonMarkers.markers.map(function (location) {
return new google.maps.Marker({
position: location
});
});
var markerCluster = new MarkerClusterer(map, clusterMarkers,
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
});
});
}
You have multiple issues.
As #xomena indicated you are creating the markers twice, remove one of those sets of code.
You are creating a MarkerClusterer for each marker. Move the creation of the MarkerClusterer out of the loop that creates the markers.
Something like this should work:
$.each(jsonMarkers.markers, function (key, data) {
let latLng = new google.maps.LatLng(data.lat, data.lng);
let marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
clusterMarkers.push(marker);
});
var markerCluster = new MarkerClusterer(map, clusterMarkers,
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
proof of concept fiddle
code snippet:
let map;
let jsonData = "assets/Data/maps.json";
const countries = [
{ lat: 48.857497, lng: 2.347628, zoom: 5, name: "France" },
//Brazil
{ lat: -15.793889, lng: -47.882778, zoom: 5, name: "Brazil" }
];
function initMap() {
const mapOptions = {
center: {
lat: -19.072264,
lng: 117.491302
},
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
countries.forEach(function (data) {
let countriesMarker = new google.maps.Marker({
map: map,
position: { lat: data.lat, lng: data.lng },
title: data.name
});
$("#selectlocation").append('<option value="' + [data.lat, data.lng, data.zoom].join('|') + '">' + data.name + '</option>');
});
let infowindow = new google.maps.InfoWindow();
let clusterMarkers = [];
//Method found on StackOverflow: https://stackoverflow.com/questions/28606149/load-data-from-json-file-into-map-markers-in-google-maps
// $.getJSON(jsonData, function (jsonMarkers) {
var jsonMarkers = {markers: [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
{lat: -36.817685, lng: 175.699196},
{lat: -36.828611, lng: 175.790222},
{lat: -37.750000, lng: 145.116667},
{lat: -37.759859, lng: 145.128708},
{lat: -37.765015, lng: 145.133858},
{lat: -37.770104, lng: 145.143299},
{lat: -37.773700, lng: 145.145187},
{lat: -37.774785, lng: 145.137978},
{lat: -37.819616, lng: 144.968119},
{lat: -38.330766, lng: 144.695692},
{lat: -39.927193, lng: 175.053218},
{lat: -41.330162, lng: 174.865694},
{lat: -42.734358, lng: 147.439506},
{lat: -42.734358, lng: 147.501315},
{lat: -42.735258, lng: 147.438000},
{lat: -43.999792, lng: 170.463352}
]};
$.each(jsonMarkers.markers, function (key, data) {
let latLng = new google.maps.LatLng(data.lat, data.lng);
if (!data.title)
data.title = ""+key;
let marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
clusterMarkers.push(marker);
});
var markerCluster = new MarkerClusterer(map, clusterMarkers,
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
// });
}
/* 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<!-- 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>
I want to group all markers near together with the same cluster size using google map.
I tried MarkerClusterer supported by Google Map, but the cluster size are different.
Is there any example for me?
Thanks for your help.
Understanding marker clustering
The MarkerClusterer library uses the grid-based clustering
technique that divides the map into squares of a certain size (the
size changes at each zoom level), and groups the markers into each
square grid. It creates a cluster at a particular marker, and adds
markers that are in its bounds to the cluster. It repeats this process
until all markers are allocated to the closest grid-based marker
clusters based on the map's zoom level. If markers are in the bounds
of more than one existing cluster, the Maps JavaScript API determines
the marker's distance from each cluster, and adds it to the closest
cluster.
You can set a MarkerClusterer option to adjust the cluster
position to reflect the average distance between all the markers that
are contained within it. You can also customize the
MarkerClusterer to modify other parameters like the grid size, the cluster
icon, cluster text, among others.
Take a look at below example:
I have used gridSize parameter to set a grouping value to my markers. This way you can achieve what you're looking for.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 10
});
}
var locations = [{
lat: -31.563910,
lng: 147.154312
},
{
lat: -33.718234,
lng: 150.363181
},
{
lat: -33.727111,
lng: 150.371124
},
{
lat: -33.848588,
lng: 151.209834
},
{
lat: -33.851702,
lng: 151.216968
},
{
lat: -34.671264,
lng: 150.863657
},
{
lat: -35.304724,
lng: 148.662905
},
{
lat: -36.817685,
lng: 175.699196
},
{
lat: -36.828611,
lng: 175.790222
},
{
lat: -37.750000,
lng: 145.116667
},
{
lat: -37.759859,
lng: 145.128708
},
{
lat: -37.765015,
lng: 145.133858
},
{
lat: -37.770104,
lng: 145.143299
},
{
lat: -37.773700,
lng: 145.145187
},
{
lat: -37.774785,
lng: 145.137978
},
{
lat: -37.819616,
lng: 144.968119
},
{
lat: -38.330766,
lng: 144.695692
},
{
lat: -39.927193,
lng: 175.053218
},
{
lat: -41.330162,
lng: 174.865694
},
{
lat: -42.734358,
lng: 147.439506
},
{
lat: -42.734358,
lng: 147.501315
},
{
lat: -42.735258,
lng: 147.438000
},
{
lat: -43.999792,
lng: 170.463352
},
{
lat: -43.998792,
lng: 170.463352
},
{
lat: -43.999792,
lng: 170.413352
},
{
lat: -43.999000,
lng: 170.463000
}
]
/* 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;
}
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBplDzEjv3SUmKPKj0IY-Iq4u_nB3z2Q1I&callback=initMap">
</script>
<div id="map"></div>
For an advance example, please take a look at this -> An example of MarkerClusterer v3 and for all examples, click here.
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>