I am trying to add multiple marker in gmap3. but it can't work.
If anybody any idea how to add multiple location in gmap3 API.
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker({
position: contactmap,
icon: 'assets/img/map-marker.gif'
})
This code is view only one marker. So how can I add multiple marker in Map?.
So finally I found the Right solution with myself so thanks to support me.
var locations = [
['Yanbu Saudi Arabia', 24.091328, 38.037067, 1],
['Yanbu Saudi Arabia', 24.005421, 38.197395, 2]
];
var map = new google.maps.Map(document.getElementById('tm-map'), {
zoom: 10,
center: new google.maps.LatLng(24.005421, 38.197395),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
console.log(markers[0]);
create an array of markers and then push each new marker object into that array and finally pass array into your marker()
follow this github response https://github.com/jbdemonte/gmap3/issues/123
for any future problems refer to their github page.
// this is how you create array
var multiadress = [{latLng:[1,2],content:"abcd"},{latLng:[3,4],content:"pqr"},{latLng:[6,7],content:"kbc"}]
var markers = [];
$.each(multiadress, function(key, val){
var latLng = val.latLng
markers.push({
position: latLng,
content: val.content
});
});
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(markers)
accept answer if it helps you.
You can pass a markerList:
var markers = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 }
];
function markerSetup(markers){
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var icon = {
url: "../Content/Images/Car.png", // url
scaledSize: new google.maps.Size(50, 60), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
// alert(markers[0].lat)
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
// map.setMap(trafficLayer);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
icon: icon,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
map.setZoom(12)
});
}
It's workable code. Hope it's help you.
I do it like this:
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'}
)
Related
I'm trying to show the title on hovering over the marker. I'm okay if it's open by default too.
I do not want infoWindow.
Here's what I have so far unsuccessfully.
function myMap() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myCenter = new google.maps.LatLng(34.131730, -117.910127);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 16,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
rotateControl: false
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var image = {
url: 'images/marker.png',
scaledSize : new google.maps.Size(60, 60),
};
var marker = new google.maps.Marker({
position:myCenter,
title: "Hello World!",
icon: image
});
marker.setMap(map);
}
function initialize() {
var myLatlng = new google.maps.LatLng(48.89364, 2.33739);
var mapOptions = { zoom: 13, center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); }
google.maps.event.addDomListener(window, 'load', initialize); initialize();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
initialize();
I'm using the Google Maps Javascript API, and I've defined a polygon and attached it to a map:
const region = new google.maps.Polygon({
map: map,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
I have a click handler that adds a marker on it when the user clicks:
google.maps.event.addListener(map, 'click', function (e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
I see the marker when I click on areas outside of the polygon, but I don't see the marker when I click inside the polygon.
I've tried hard-coding a zIndex on each, but no luck. Any ideas?
Two options:
add a click listener to the polygon
google.maps.event.addListener(region, 'click', function (e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
proof of concept fiddle
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
});
const region = new google.maps.Polygon({
map: map,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < region.getPath().getLength(); i++) {
bounds.extend(region.getPath().getAt(i));
}
map.fitBounds(bounds);
function addMarker(e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
}
google.maps.event.addListener(map, 'click', addMarker);
google.maps.event.addListener(region, 'click', addMarker);
}
google.maps.event.addDomListener(window, "load", initialize);
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>
make the polygon not capture clicks (clickable: false);
const region = new google.maps.Polygon({
map: map,
clickable: false,
paths: [
{ lat: 40.5577151228437, long: -74.15980859374997 },
{ lat: 40.599436503265856, long: -74.27516503906247 },
{ lat: 40.67030312529891, long: -74.25319238281247 },
{ lat: 40.72548139969253, long: -74.26079167357881 },
],
}
proof of concept fiddle
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
});
const region = new google.maps.Polygon({
map: map,
clickable: false,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < region.getPath().getLength(); i++) {
bounds.extend(region.getPath().getAt(i));
}
map.fitBounds(bounds);
google.maps.event.addListener(map, 'click', function(e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
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>
I created some markers on google maps and want to open the country's php page when I click on it(marker) but I don't know why it doesn't do that. Here is the layout of my code:
<script>
function initMap() {
var germany = {lat: 51.268917, lng: 9.591616};
var russia = {lat: 55.765237, lng: 37.582553};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: germany
});
var marker = new google.maps.Marker({
position: germany,
map: map,
title:'Germany',
url:'Germany.php',
animation:google.maps.Animation.DROP
});
var marker = new google.maps.Marker({
position: russia,
map: map,
title:'Russia',
animation:google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function()
{window.location.href = marker.url;});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=My_API_Key&callback=initMap">
</script>
I can't actually add comments, but you can try this. I have working for mine. You can tidy it up too.
<script>
function callMyUrl(element){
alert('I am from ' + element.title);
}
function initMap() {
var germany = {lat: 51.268917, lng: 9.591616};
var russia = {lat: 55.765237, lng: 37.582553};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: germany
});
var location = [
{title: 'Germany', lat: 51.268917, lng: 9.591616 },
{title: 'Russia', lat: 55.765237, lng: 37.582553 }
]
location.forEach(function(element){
var marker;
marker = new google.maps.Marker({
position: new google.maps.LatLng(element.lat, element.lng),
title: element.title,
map: map
});
return google.maps.event.addListener(marker, 'click', function() {
callMyUrl(element);
});
});
}
</script>
I am trying achieve multiple markers on a Google map to mark access points for a river. So far I have one marker (myLatlng) that displays and anotehr that shows after a button is clicked, however when I have tried adding more than one (accessPoint1), it will not appear. Does anyone know how to fix this? Thanks in advance.
function initialize() {
var myLatlng=new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"We are here!"
});
var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: accessPoint1}),
marker = new google.maps.Marker({
position: accessPoint1,
map: map,
title:"Access Point 1"
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng( position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 3,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds=new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
map.setOptions(myOptions);
map.fitBounds(bounds);
new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!",
icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe(){
$(this).hide();
if (navigator.geolocation){
navigator.geolocation
.getCurrentPosition(successCallback,errorCallback,{timeout:10000});
}
else{
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
google.maps.event.addDomListener(window,'load',initialize);
You are recreating the map for the second access point, which means you have two maps, each having one marker on it, the first of which is overwritten and not visible. You are also overwriting the marker variable (which shouldn't cause an issue):
Unless you have multiple <div>'s with maps in them, only create one map.
function initialize() {
var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 3,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds = new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
map.setOptions(myOptions);
map.fitBounds(bounds);
new google.maps.Marker({
position: latlng,
map: map,
title: "You are here!",
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe() {
$(this).hide();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
timeout: 10000
});
} else {
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
I had created a gMap in javascript.
While loading the map, the marker also loads along with map.I want to load the marker after clicking the load marker button. How to do that?
JS:
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
}
});
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Position',
map: map,
draggable: true
});
updateMarkerPosition(latLng);
geocodePosition(latLng);
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html:
<div id="info"></div>
<div id="mapCanvas"></div>
<button>Load MArker</button>
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
}
});
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Position',
map: null, //<-- it will be created but not shown.
draggable: true
});
updateMarkerPosition(latLng);
geocodePosition(latLng);
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
$('button').click(function(){
marker.setMap(map); //<-- assign the map, in other words .. show it.
});
}
google.maps.event.addDomListener(window, 'load', initialize);
SECOND OPTION
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
}
});
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Position',
map: map,
draggable: true,
visible: false //<-- default value is true
});
updateMarkerPosition(latLng);
geocodePosition(latLng);
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
$('button').click(function(){
marker.setVisible(true); //<-- show it.
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Check here for the difference of the two methods What is the difference between "marker.setVisible(false)" and "marker.setMap(null)" in Google Maps v3?