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');
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 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>
My code is given below. It is working now but if I uncomment icon line ( //icon: 'http://108.163.162.202:8080/finex/img/map_marker.png'), all the marker and their title do not display.
I want to add my custom marker in my page and my code does not allowing me.
Please help.
$(function() {
var locations = [
['Jersey City', 40.7178746, -74.0718356],
['Bronx', 40.8504989, -73.84934,5 ],
['Union City', 40.7667435, -74.0303289],
['Queens', 40.651018, -73.871192],
['Ridgefield', 40.8256436, -74.0153092]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(40.7590615, -73.969231),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
mapTypeControl: false,
scaleControl: false,
navigationControl: true,
draggable: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
});
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,
title: locations[i][0],
//icon: 'http://108.163.162.202:8080/finex/img/map_marker.png',
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marker.title);
infowindow.open(map, marker);
}
})(marker, i));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div style="height:300px;width:500px;" id="map"></div>
I did this in my project
<input type="hidden" value="http://108.163.162.202:8080" id="baseUrl" >
var baseUrl=$('#baseUrl').val();
icon: new google.maps.MarkerImage(
baseUrl+'images/marker-new.png',
null,
null,
// new google.maps.Point(0,0),
null,
new google.maps.Size(36, 36)
),
The image has limited access with .htaccess. I have to enter username and password. Perhaps this is the problem? ;)
In addition you can leave the comma after the icon statement if nothing is following.
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>