Animate google maps polyline from a set of points like in animaps

Animate google maps polyline from a set of points like in animaps - javascript

I have a set or array of points (lat, lon) which represent a vehicle route or path. I want to play those points in something looks like a flash (but using javascript and google maps api), like in this page:
http://www.animaps.com/pb/161960002/1805/Piraeus_Line
or like in google maps's page:
https://www.youtube.com/watch?v=iec4fVTuNCE
I have been looking for the many tutorials but nothing gives a straight forward solution.
The problem of animaps is that I should always embed it as an iframe in my website, while I need to make this dynamic because I have positions retrieved from database.

First use the
Directions Service
to get the directions from your from > to positions.
Then create a polyline for that direction, to the polyline you can add symbols that you can animate along it's path by updating their offset.
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var polyline, symbol;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: chicago,
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#212121"
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#212121"
}]
}, {
"featureType": "administrative",
"elementType": "geometry",
"stylers": [{
"color": "#757575"
}, {
"visibility": "off"
}]
}, {
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#9e9e9e"
}]
}, {
"featureType": "administrative.land_parcel",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#bdbdbd"
}]
}, {
"featureType": "administrative.neighborhood",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#181818"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#1b1b1b"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#2c2c2c"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#8a8a8a"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#373737"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#3c3c3c"
}]
}, {
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [{
"color": "#4e4e4e"
}]
}, {
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}]
}, {
"featureType": "water",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#3d3d3d"
}]
}]
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var request = {
origin: 'chicago, il',
destination: 'peoria, il',
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status == 'OK') {
createPath(response);
}
});
}
function createPath(response) {
symbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
strokeColor: '#fff'
};
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#e91e63',
strokeWeight: 3,
icons: [{
icon: symbol,
offset: '0%'
}]
});
var bounds = new google.maps.LatLngBounds();
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.setCenter(bounds.getCenter());
animateCircle(polyline);
}
function animateCircle(line) {
var count = 0;
var icons = line.get('icons');
window.setInterval(function() {
count = (count + 1) % 200;
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 200px;
width: 100%;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>

Related

Add a layer and a style in google maps api

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!

Google Map GroundOverlay set map bounds, zoom and center of image bounds

I am using a groundoverlay to set an image on a map but need the map to use my groundoverlay as the center of map and zoom to fit the whole ground overlay on map and center on groundoverlay. Anyone have a solution for this? Been looking for a while.
Example fiddle here
https://jsfiddle.net/abennington/qvLe3xua/18/
My js code
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
maxZoom: 17,
scrollwheel: false,
center: {lat: 29.76786111111111, lng: -95.45805833333334},
mapTypeId: 'hybrid',
zoomControl: true,
scaleControl: true,
streetViewControl: false,
mapTypeControl: false,
styles: [
{
"featureType": "all",
"elementType": "geometry.fill",
"stylers": [
{
"weight": "0.50"
}
]
},
{
"featureType": "all",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#9c9c9c"
}
]
},
{
"featureType": "all",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.government",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.school",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_complex",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
},
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#7b7b7b"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "simplified"
},
{
"gamma": "1"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
}
]
});
var imageBounds = {
north: 29.770291666666665,
south: 29.765483333333332,
east: -95.4573388888889,
west: -95.46150555555556
};
var overlayOpts = {
opacity:1.0
};
historicalOverlay = new google.maps.GroundOverlay(
'http://www.houstonian.com/resources/1/CampMap-Rotated2.png',
imageBounds,overlayOpts);
historicalOverlay.setMap(map);
}

Pass variables from php to javascript google map

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>

How can I make this google map dark?

I'm using this type of code for google map location:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:280px;width:auto;">
<div id="gmap_canvas2" style="height:300px;width:auto;"></div>
<style>
#gmap_canvas2 img {
max-width:none!important;
background:none!important
}
</style>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(44.193444, 28.649466),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(44.193444, 28.649466)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constanța, România"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
And I have this theme but I don't know how to use it, or where to put it.
[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
It's from this website https://snazzymaps.com/style/1261/dark

As described in the documentation, styles is a property of the MapOptions object that is passed in to the google.maps.Map constructor.
working fiddle
code snippet:
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(44.193444, 28.649466),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#000000"
}, {
"lightness": 40
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.country",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": "-100"
}, {
"lightness": "30"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"gamma": "0.00"
}, {
"lightness": "74"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [{
"lightness": "3"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 21
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 19
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}]
};
map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(44.193444, 28.649466)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constanța, România"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
#gmap_canvas2 img {
max-width: none!important;
background: none!important
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div style="overflow:hidden;height:280px;width:auto;">
<div id="gmap_canvas2" style="height:300px;width:auto;"></div>

This is what you need to implement (along with their library files):
<script>styles.push({ id: 1261, name: 'Dark', json: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}] });</script>

Google Maps API v3 InfoWindow first appears in incorrect location, then loads correctly

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>

We Keep Coding

JavaScript is the programming language of the Web.

Animate google maps polyline from a set of points like in animaps - javascript

Related

Add a layer and a style in google maps api

Google Map GroundOverlay set map bounds, zoom and center of image bounds

Pass variables from php to javascript google map

How can I make this google map dark?

Google Maps API v3 InfoWindow first appears in incorrect location, then loads correctly

Categories

Resources