This code shows me a Google Map with 1 marker:
var myCenter=new google.maps.LatLng(47.406466,8.5505948);
function initialize() {
var roadAtlasStyles = [{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "lightness": -8 },
{ "gamma": 1.18 }
]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "gamma": 1 },
{ "lightness": -24 }
]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "transit",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "road",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "landscape",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "poi",
"stylers": [
{ "saturation": -100 }
]
},
{}
]
var mapstyle = [{"stylers": [{ "saturation": -100 },{ "gamma": 1.33 }]}];
var mapProp = {
center:myCenter,
zoom:15,
styles: mapstyle,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ed0e1b'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Geiger AG - Büro und Werkhof<br>Fälmisstrasse 15<br>8833 Samstagern"
});
infowindow.open(map,marker,roadAtlasStyles);
}
google.maps.event.addDomListener(window, 'load', initialize);
I would like to display another marker which includes another address. Since I have some custom styles on it, I would like to keep the same code but just insert another marker. How can I do this when I want to keep my own code?
Not really the cleanest way but this is how I resolved it:
var myCenter = new google.maps.LatLng(47.190627,8.6786925);
var myOtherCenter = new google.maps.LatLng(47.2296871,8.6718189);
function initialize() {
var roadAtlasStyles = [
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "lightness": -8 },
{ "gamma": 1.18 }
]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "gamma": 1 },
{ "lightness": -24 }
]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "transit",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "road",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "landscape",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "poi",
"stylers": [
{ "saturation": -100 }
]
}, {
}
]
var mapstyle = [{"stylers": [{ "saturation": -100 },{ "gamma": 1.33 }]}];
var mapProp = {
center:myCenter,
zoom:12,
styles: mapstyle,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var mapProp1 = {
center:myOtherCenter,
zoom:12,
styles: mapstyle,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp1);
var marker=new google.maps.Marker({
position:myCenter,
icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ed0e1b'
});
var marker1=new google.maps.Marker({
position:myOtherCenter,
icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ed0e1b'
});
marker.setMap(map);
marker1.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Geiger AG - Büro und Werkhof<br>Fälmisstrasse 15<br>8833 Samstagern"
});
var infowindow1 = new google.maps.InfoWindow({
content:"Geiger AG - Postadresse<br>Postfach<br>8820 Wädenswil"
});
infowindow.open(map,marker,roadAtlasStyles);
infowindow1.open(map,marker1,roadAtlasStyles);
}
google.maps.event.addDomListener(window, 'load', initialize);
I cleaned a little also I created a function to create the addMarker, if you want to add more markers just add into the markersData array and thats it :), maybe you want to add different icons, just add it into markersData array
(function(){
var map;
var mapslatlng = {lat: 47.406466, lng: 8.5505948};
var markers = [];
var markersData = [
['marker 1', 47.406466, 8.5505948],
['marker 2', 47.406466, 8.5565948]
];
function initialize() {
var mapOptions = {
center: mapslatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 15
};
map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);
mapStyle();
addMarker();
}
function mapStyle() {
var usRoadMapType = new google.maps.StyledMapType([
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "lightness": -8 },
{ "gamma": 1.18 }
]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 },
{ "gamma": 1 },
{ "lightness": -24 }
]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "transit",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "road",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "administrative",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "landscape",
"stylers": [
{ "saturation": -100 }
]
}, {
"featureType": "poi",
"stylers": [
{ "saturation": -100 }
]
}
], {name: 'Road Atlas'});
map.mapTypes.set('usroadatlas', usRoadMapType);
map.setMapTypeId('usroadatlas');
}
function addMarker() {
for (var i = 0; i < markersData.length; i++) {
var marker = markersData[i];
markers.push(new google.maps.Marker({
position: {lat: marker[1], lng: marker[2]},
title: marker[0],
map: map,
draggable: true
}));
};
}
google.maps.event.addDomListener(window, 'load', initialize);
})();
Related
I'm trying to add a custom to pin to my map. The first part of my code is existing code. I did not write it. I'm just modifying it so I can add custom marker. Here's the first part:
<?php
$map = get_field('map');
$lat = $map['lat'];
$lng = $map['lng'];
?>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: {
lat: <?php echo $lat; ?>,
lng: <?php echo $lng; ?>
},
disableDefaultUI: true,
styles: [
{
"elementType": "geometry.fill",
"stylers": [
{
"color": "#fff500"
}
]
},
{
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#000000"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
}
]
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here's the second part of what I added to create the marker. This code does not seem to work with the code above. Any suggestions?
var marker = new google.maps.Marker({
position: location,
map: map,
icon: 'https://image.ibb.co/e5hmC5/bab_marker.png'
});
I'm trying to make the transitLayer layer appear on a map with a style but it doesn't work.
The transitLayer is visible on the normal map and on the satellite view but not on the map which has a style.
Any ideas ?
Bonus question: I would also like to indicate a legend above each of the 2 circles as on this site: https://www.vianavigo.com/en/nearby/result?center=2.494094045%3B48.89430279%7CAddress%7C213+rue + Edouard + Vaillant% 7C93140% 7CBondy% 7C611561.9084090972% 7C2432902.394653598 & e = 0 & filters = 111
<script>
function initMap() {
var styledMapType = new google.maps.StyledMapType(
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "landscape",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
], {
name: 'Styled Map'
});
var bondy = {lat: 48.894362, lng: 2.494127};
var map = new google.maps.Map(document.getElementById('map'), {
center: bondy,
zoom: 15,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
transitLayer.setMap(styledMapType);
var circle = new google.maps.Circle({
center: bondy,
map: map,
radius: 1000, // IN METERS.
fillColor: '#fcd18d',
fillOpacity: 0.1,
strokeColor: "#fcd18d",
strokeWeight: 3, // DON'T SHOW CIRCLE BORDER.
});
var circle = new google.maps.Circle({
center: bondy,
map: map,
radius: 500, // IN METERS.
fillColor: '#fcd18d',
fillOpacity: 0.4,
strokeColor: "#fcd18d",
strokeWeight: 3 // DON'T SHOW CIRCLE BORDER.
});
var marker = new google.maps.Marker({
position: bondy,
map: map,
title: "Bondy - 213-215 rue Édouard Vaillant"
});
}
</script>
It will work when you remove the following style values since these style values are overriding the transitLayers on your map:
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
}
and
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
}
As for the labels of your circle, there's no direct label parameter that you can use for circle objects. There are multiple ways that you can achieve this such as using a marker with transparent icon and a label, using infowindow and using custom Overlays.
I used a marker with transparent icon and this is the code snippet and explanation on how I get it:
var Circle1 = google.maps.geometry.spherical.computeOffset(center, 1000, 0);
var invisibleMarker1 = new google.maps.Marker({
position: Circle1,
map: map,
icon: "https://www.iconspng.com/uploads/transparent-background-pattern/transparent-background-pattern.png",
label: "1000"
First, I need to get the coordinates of the topmost of the circle in the map. I got this by using the 'computeOffset' of the Geometry library. You also need to add this value( libraries=geometry) in the script where you are calling the APIs:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&&libraries=geometry&callback=initMap" async defer></script>
Once you get the coordinates, you can then use this as the coordinates of your marker where you use a transparent image as your 'icon' and your circle label as the 'label' of the marker. You can see the working fiddle here.
Hope this helps!
I need to pass some php variables to an external js file where my google map is initialized. Of course the map itself should use those variables. For now I can't see my map correctly loaded and I get the error
TypeError: map is undefined
and I can't even pass my variables!
I'm trying to use the easiest way like
My php
<script type="text/javascript">
var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
var latitude = '<?php echo $post_latitude; ?>'; //this is the latitude
var longitude = '<?php echo $post_longitude; ?>'; //this is the long
var paddress = '<?php echo $address; ?>'; //this is the address name
</script>
Now I guess that I'm doing wrong something in my js:
var geocoder;
var map;
function initialize_map() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
scrollwheel: false,
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}],
},
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
geocoder.geocode( { 'address': paddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new MarkerWithLabel({
position: results[0].geometry.location,
map: map, //Here I get the error
icon: pointer, //Here I don't get any image
labelContent: paddress, //here I don't get any address
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 1.0},
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize_map();
codeAddress('location');
The map it's shown, I see it but without parameters. What's wrong???
A quick fix
return the map, otherwise your codeAddress function will run without waiting for the previous function ;)
function initialize_map() {
....
return map;
}
window.map = initialize_map();
codeAddress('location');
Not sure about your php stuff, if it works, one problem could be another scope.
Try to map the variables to the global window object as shown with the map.. (quick & dirty fix)
I get a javascript error: Uncaught TypeError: Cannot read property 'setCenter' of undefined on this line:
map.setCenter(results[0].geometry.location);
The main issue is the comma at the end of the definition of the mapOptions variable, that makes the following declaration of the map variable local to the initialize_map function, make the line in initialize_map initialize the global map by changing that to a semi-colon (;).
proof of concept fiddle
code snippet:
// var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
var latitude = '40.7127837'; //this is the latitude
var longitude = '-74.0059413'; //this is the long
var paddress = 'New York, NY'; //this is the address name
var geocoder;
var map;
function initialize_map() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
scrollwheel: false,
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "administrative",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"lightness": 33
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.75"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-37"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f9f9f9"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "40"
}, {
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-37"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "100"
}, {
"weight": "2"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "80"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "0"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry",
"stylers": [{
"lightness": "-4"
}, {
"saturation": "-100"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#c5dac6"
}, {
"visibility": "on"
}, {
"saturation": "-95"
}, {
"lightness": "62"
}]
}, {
"featureType": "poi.park",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "1.00"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.50"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "0.50"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#c5c6c6"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-13"
}]
}, {
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [{
"lightness": "0"
}, {
"gamma": "1.09"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#e4d7c6"
}, {
"saturation": "-100"
}, {
"lightness": "47"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-12"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#fbfaf7"
}, {
"lightness": "77"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"lightness": "-5"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-15"
}]
}, {
"featureType": "transit.station.airport",
"elementType": "geometry",
"stylers": [{
"lightness": "47"
}, {
"saturation": "-100"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#acbcc9"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"saturation": "53"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-42"
}, {
"saturation": "17"
}]
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [{
"lightness": "61"
}]
}],
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
geocoder.geocode({
'address': paddress
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new MarkerWithLabel({
position: results[0].geometry.location,
map: map, //Here I get the error
//icon: pointer, //Here I don't get any image
labelContent: paddress, //here I don't get any address
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {
opacity: 1.0
},
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize_map();
codeAddress('location');
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map"></div>
See this page
For some reason, in the first second of loading the map, the InfoWindow is incorrectly appearing at the left edge and then quickly appearing in the correct, middle position of the map. I want the InfoWindow to automatically be in the middle of the map whenever it is loaded. Is there any way I can fix this rough transition? Is something in my code out of order? It seems as if the loading should be smoother than this.
<div id="map-canvas"></div>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(29.950217, -90.075517);
var centerPos = new google.maps.LatLng(29.952365, -90.075853);
var mapOptions = {
zoom : 15,
center : centerPos,
styles : [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//content within the popup
var contentString = '<div id="mapContent">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>'+
'<div id="bodyContent">'+
'<p>Click here for directions'+
'<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>'+
'</div>'+
'</div>';
//the info window
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//the marker on the map
var marker = new google.maps.Marker({
position : myLatlng,
map : map,
title : 'Blanchard Systems'
});
//when clicking the marker, open the info window
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
//auto open info window
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
// end google maps
</script>
Open the infowindow with your existing click event once the map is idle:
//auto open info window
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(marker, 'click');
});
fiddle
code snippet:
function initialize() {
var myLatlng = new google.maps.LatLng(29.950217, -90.075517);
var mapOptions = {
zoom: 15,
center: myLatlng,
styles: mapStyles
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//content within the popup
var contentString = '<div id="mapContent">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>' +
'<div id="bodyContent">' +
'<p>Click here for directions' +
'<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>' +
'</div>' +
'</div>';
//the info window
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//the marker on the map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Blanchard Systems'
});
//when clicking the marker, open the info window
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
//auto open info window
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(marker, 'click');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var mapStyles = [{
"featureType": "administrative",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"lightness": 33
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.75"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-37"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f9f9f9"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "40"
}, {
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-37"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "100"
}, {
"weight": "2"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "80"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "0"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry",
"stylers": [{
"lightness": "-4"
}, {
"saturation": "-100"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#c5dac6"
}, {
"visibility": "on"
}, {
"saturation": "-95"
}, {
"lightness": "62"
}]
}, {
"featureType": "poi.park",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "1.00"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.50"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "0.50"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#c5c6c6"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-13"
}]
}, {
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [{
"lightness": "0"
}, {
"gamma": "1.09"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#e4d7c6"
}, {
"saturation": "-100"
}, {
"lightness": "47"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-12"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#fbfaf7"
}, {
"lightness": "77"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"lightness": "-5"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-15"
}]
}, {
"featureType": "transit.station.airport",
"elementType": "geometry",
"stylers": [{
"lightness": "47"
}, {
"saturation": "-100"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#acbcc9"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"saturation": "53"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-42"
}, {
"saturation": "17"
}]
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [{
"lightness": "61"
}]
}];
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" style="border: 2px solid #3872ac;"></div>
Add position: centerPos, above content: contentString.
Also you should remove var myLatlng = new google.maps.LatLng(29.950217, -90.075517); since you all ready have it defined with centerPos. Don't forget to replace position : myLatlng, with position: centerPos, inside your marker variable if you do remove myLatLng.
Snippet
function initialize() {
var centerPos = new google.maps.LatLng(29.952365, -90.075853);
var mapOptions = {
zoom: 13,
center: centerPos,
styles: [{
"featureType": "administrative",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"lightness": 33
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.75"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-37"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f9f9f9"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "40"
}, {
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-37"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "100"
}, {
"weight": "2"
}]
}, {
"featureType": "landscape.natural",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "80"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "0"
}]
}, {
"featureType": "poi.attraction",
"elementType": "geometry",
"stylers": [{
"lightness": "-4"
}, {
"saturation": "-100"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#c5dac6"
}, {
"visibility": "on"
}, {
"saturation": "-95"
}, {
"lightness": "62"
}]
}, {
"featureType": "poi.park",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"lightness": 20
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "1.00"
}]
}, {
"featureType": "road",
"elementType": "labels.text",
"stylers": [{
"gamma": "0.50"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}, {
"gamma": "0.50"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#c5c6c6"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-13"
}]
}, {
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [{
"lightness": "0"
}, {
"gamma": "1.09"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#e4d7c6"
}, {
"saturation": "-100"
}, {
"lightness": "47"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "-12"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#fbfaf7"
}, {
"lightness": "77"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"lightness": "-5"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "-15"
}]
}, {
"featureType": "transit.station.airport",
"elementType": "geometry",
"stylers": [{
"lightness": "47"
}, {
"saturation": "-100"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#acbcc9"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"saturation": "53"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"lightness": "-42"
}, {
"saturation": "17"
}]
}, {
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [{
"lightness": "61"
}]
}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//the marker on the map
var marker = new google.maps.Marker({
position: centerPos,
map: map,
title: 'Blanchard Systems'
});
//content within the popup
var contentString = '<div id="mapContent">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>' +
'<div id="bodyContent">' +
'<p>Click here for directions' +
'<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>' +
'</div>' +
'</div>';
//the info window
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: centerPos,
});
//when clicking the marker, open the info window
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
//auto open info window
infowindow.open(map, marker);
}
initialize();
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
This question already has an answer here:
Maps javascript api center issue
(1 answer)
Closed 8 years ago.
I've integrated Google map with my website and it is not fully loaded. See the screen below;
I've integrated it by using the code which is given below;
<script>
var geocoder, map;
// var myAddress = document.getElementById('address');
var eineAdresseZH = 'MyAddress,Location'
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': eineAdresseZH
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 16,
draggable: false,
scrollwheel: false,
center: results[0].geometry.location,
styles: [
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#8c9ee1"
},
{
"hue": "#001a76"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#001a76"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
},
{
"weight": 1.5
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#c39619"
},
{
"saturation": 40
},
{
"lightness": -20
},
{
"gamma": 5
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#c39619"
},
{
"saturation": 50
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "on"
},
{
"hue": "#c39619"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
},
{
"color": "#646464"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#c39619"
},
{
"saturation": -30
},
{
"lightness": 70
}
]
}
]
}
map = new google.maps.Map(document.getElementById("map-canvasZH"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
google.maps.event.addDomListener(window, 'load', codeAddress);
</script>
<div id="map-canvasZH"></div>
I've multiple google maps in the same page which is managed by different tabs. When we click on each tab the map is not fully loaded.
If anyone knows the solution, please help me to find the problem.
Thanks,
Try this:
$(yourtab).on("click", function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(yourSavedCenter);
});