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>
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 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'}
)
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 have a function to show a google map:
function initMapSA(lat, ln) {
var myLatLng = { lat: lat, lng: ln };
var opt = {
center: myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map2 = new google.maps.Map(document.getElementById('map_canvas_agent'), opt);
var markerSa = new google.maps.Marker({
position: myLatLng,
map: map2,
title: 'Hello World!'
});
}
In #modal-body I add <div id="map_canvas_agent"></div>
I trigger it via a form button click event:
$(".sa-location").click(function () {
var id = $("#ServiceAgent").val(); //combobox value
$.get("#Url.Action("GetServiceAgentLocation")", { id: id }, function (data) {
initMapSA(data.Lat, data.Ln);//Initialize google maps
}, "json");
});
The Goole Map is showing but it is just a grey screen rather than an actual map. How do I fix that?
Force trigger a resize on the map:
google.maps.event.trigger(map, 'resize');
I'm updating the marker on my google map with new positions constantly from the server. The positions are stored in the variables called Longitude and Latitude. I managed to get the markers moving to the new positions but the map constantly refreshes. What can I do to stop this from happening? I only want the markers to move.
google.maps.visualRefresh = true;
//in my actual code the coordinates aren't var lat and lon
var myLatlng = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, 'resize');
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var latlng = new google.maps.LatLng(Latitude,Longitude);
marker.setPosition(latlng);
//map.setCenter(latlng);
//covertlisten.remove();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Get rid of
map.setCenter(latlng);