This is my code..
var styles = [
{
"featureType": "landscape",
"stylers": [
{"weight": 0.1},
{"color": "#E7EDEF"}
]
},
...
{
"featureType": "poi.park",
"elementType": "labels",
"stylers": [
{"visibility": "on"}
]
}
];
var map;
function initialize() {
var centerM = new google.maps.LatLng(42.641185, 14.015790);
var iconBase = window.location.origin + Drupal.settings.basePath + 'sites/default/themes/actomedia/img/';
var mapOptions = {
zoom: 15,
center: centerM,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Map Marker & infoBox
markerOpt = {
map: map,
icon: iconBase + 'puntoEnergy_map_ico.png',
title: 'Punto Energy',
animation: google.maps.Animation.DROP
};
markerPicasso = new google.maps.Marker($.extend({position: centerM}, markerOpt));
}
google.maps.event.addDomListener(window, 'load', initialize);
And the map works fine in Chrome and Firefox but in IE the marker is not showed.
Someone know how to fix that?
I tryed to remove the marker animation, check all the commas in the code but it still don't work T_T
--- UPDATE! ---
Following Anto Jurković question I tryed to print the icon URL and I find there is a bug in the window.location.origin who return undefined to me.
I fixed it putting this code on the top of the js file (surce)1
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}
I am Creting Marker Using below function :
createMarker(Map, legs[i].start_location, legs[i].start_address, markerletter);
function createMarker(map, latlng, html, color) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: getMarkerImage(color),
shape: iconShape,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
//marker.myname = label;
google.maps.event.addListener(marker, 'click', function () {
//Set Infowindow Logic
});
return marker;
}
Javascript
function initialize() {
var Lattts = document.getElementById('lat').value;
var Longgs = document.getElementById('long').value;
var myLatlng = new google.maps.LatLng(parseFloat(Lattts), parseFloat(Longgs));
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: myLatlng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var icon = {
url: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png'
};
var contentString = 'Contents';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: icon,
zIndex: Math.round(myLatlng.lat() * -100000) << 5,
animation: google.maps.Animation.DROP
});
//marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
});
setTimeout(function () { marker.setAnimation(google.maps.Animation.BOUNCE); }, 2000);
}
google.maps.event.addDomListener(window, 'load', initialize);
Related
On the embedded Google map (e.g. here - https://www.familienfreunde.de/4.php?Nummer=132700000302) you can see a lot of Point of Interest.
I would like to remove them.
<script>
function initMap() {
var latlng = new google.maps.LatLng(51.3267379,12.3653812);
var myOptions = {
zoom: 19,
center: latlng,
mapTypeControlOptions: {
mapTypeIds: ["roadmap", "satellite"]
}
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var box_html = "<h5>Gymnasium Gerda Taro Schule</h5><p>04107 Leipzig<br /><b>Profil anzeigen</b></p>";
var icon = new google.maps.MarkerImage('/bilder/marker4.png');
var marker = add_marker(51.3267379,12.3653812,'Gymnasium Gerda Taro Schule',box_html,icon);
marker.setMap(map);
var box_html = "<h5>Rechtsanwalt Henry Bach</h5><p>04107 Leipzig<br /><b>Profil anzeigen</b></p>";
var icon = new google.maps.MarkerImage('/bilder/marker22.png');
var marker = add_marker(51.3339224,12.3741322,'Rechtsanwalt Henry Bach',box_html,icon);
marker.setMap(map); }
function add_marker(lat,lng,title,box_html,icon) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: icon,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(map, 'dragstart', function() {
infowindow.close();
});
return marker;
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=UNSERKEY&callback=initMap" async defer></script>
(I have only removed some more markers for the sake of clarity.)
You could try seeting the visibility of POI off using styles property
function initMap() {
var latlng = new google.maps.LatLng(51.3267379,12.3653812);
var myOptions = {
zoom: 19,
center: latlng,
styles = [
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
mapTypeControlOptions: {
mapTypeIds: ["roadmap", "satellite"]
}
I want to show 2 markers in google map but only 1 marker is populating in the map another is not populating. how to show 2 markers in the map , I think I have missed the variable name changing for the second marker but not able to find where I did mistake.
code
function initMap() {
var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
myOptions = {
zoom: 14,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "1",
});
var contentString = 'marker 1';
var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
myOptions = {
zoom: 14,
center: myLatLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker1 = new google.maps.Marker({
position: myLatLng2,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "2",
});
var contentString2 = 'marker 2';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.addListener('click', function () {
infowindow.open(map, marker1);
});
marker.setMap(map);
marker1.setMap(map);
}
You are creating a new map after you add the first marker to it.
var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
myOptions = {
zoom: 14,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
// first map instantiation <================================================== ***
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "1",
});
var contentString = 'marker 1';
var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
myOptions = {
zoom: 14,
center: myLatLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
// second map instantiation <================= remove this ==================== ***
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
Remove that code.
proof of concept fiddle
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
function initMap() {
var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
myOptions = {
zoom: 7,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "1",
});
var contentString = 'marker 1';
var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
marker1 = new google.maps.Marker({
position: myLatLng2,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
label: "2",
});
var contentString2 = 'marker 2';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.addListener('click', function() {
infowindow.open(map, marker1);
});
marker.setMap(map);
marker1.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<div id="map-canvas"></div>
Is it possible to add the LatLng to the label of the marker that is placed at random to show where that marker is? Also considering the infoWindow option but have not been successful yet.
var map;
var markers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markersIndex = 0;
function initialize() {
var Wilm = new google.maps.LatLng(34.2257,-77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-
canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
label: markers[markersIndex++ % markers.length],
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
Not sure what you mean by a label.
this will add markers to the map with an info window with the latlng:
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
<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=KEY&callback=initMap">
</script>
I need a checkbox to get a function to hide and show a marker or an group of markers
for some reason idk (i'm new to google maps api) the function doesnt work with infobubbles, when i tried with infowindow it works.. any help ? thanks
var map;
function init() {
var mapCenter = new google.maps.LatLng(-22.967956,-43.197397);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: mapCenter,
streetViewControl: true,
mapTypeControl: true,
mapLabels:true,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var myLatLng = new google.maps.LatLng(-22.973878,-43.192564);
var myLatLng1 = new google.maps.LatLng(-22.968373,-43.183176);
var marker = new google.maps.Marker({
map: map,
position: myLatLng,
title: 'marker'
});
var marker1 = new google.maps.Marker({
map: map,
position: myLatLng1,
title: 'marker1'
});
infoBubble = new InfoBubble({
maxWidth: 246,
maxHeight: 350
});
infoBubble.addTab('home', contenthome);
infoBubble.addTab('Info', content);
infoBubble.addTab('Fase', contentString);
google.maps.event.addListener(marker, 'click', infobut);
function infobut(event) {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker); }
}
infoBubble1 = new InfoBubble({
maxWidth: 246,
maxHeight: 350
});
infoBubble1.addTab('home', contenthome);
infoBubble1.addTab('Info', content);
infoBubble1.addTab('Fase', contentString);
google.maps.event.addListener(marker1, 'click', infobut1);
function infobut1(event) {
if (!infoBubble1.isOpen()) {
infoBubble1.open(map, marker1); }
}
function hidemarker() {
marker1.setVisible(false);
}
and the button
<input type="checkbox" onClick="hidemarker()" name="1qts" value="1 Quartos" class="botao2">
From your code it is not clear where init() function finishes. I put close } just before hidemarker() function. Problem is that variable marker1 is not visible and it should be made global like variable map.
And to close also info bubble, just call method close():
var map;
var marker1;
function init() {
...
marker1 = new google.maps.Marker({
map: map,
position: myLatLng1,
title: 'marker1'
});
...
}
function hidemarker() {
infoBubble1.close();
marker1.setVisible(false);
}
google.maps.event.addDomListener(window, 'load', init);
<script type="text/javascript">
function initialize1() {
var markers = JSON.parse('<%=FarmerMap()%>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].Lats, markers[0].Longs),
zoom: 10,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("FarmerMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.Lats, data.Longs);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.BOUNCE
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.FarmerName,data.Area);
infoWindow.open(map, marker);
});
})(marker, data);
}
return true;
}
</script>
My question is infoWindow.setContent(data.FarmerName,data.Area); will not dispaly two columns values ..it shows only one column Name..that means FarmerName only...i want to shows farmername and area also...
Try this:
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent('<p>' + data.FarmerName
+ ', ' + data.Area + '</p>');
infoWindow.open(map, marker);
});