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!
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 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>
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>
I'm having a bit of a nightmare with this Google Maps custom styling wizard.
Ok, I have my map and it loads fine, but I am trying to add my JSON file to custom style the thing and I get an error.
Uncaught InvalidValueError: not a Feature or FeatureCollection
Also the error seems to come from a file called main.js - but I have a file called main.js and it doesn't have this code in it.
Here is my code in the head of my document.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {lat: 53.668398, lng: -2.167713}
});
// Load a GeoJSON from the same server as our demo.
map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
My JSON code:
{
"type": "FeatureCollection",
"features": [
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "color": "#efefef" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#dedddd" }
]
},{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#efefef" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "on" }
]
}
]
}
Any ideas what I'm doing wrong here? This is my first go at doing maps.
You are confusing the JSON to style a map which is what you get out of the Map Styling Wizard and the GeoJSON used by the data layer
They go in different places and do different things. To style the map, put the "style" data in the MapOptions styles property.
The data layer is used for displaying geographic information on the map (markers, polygons, polylines,...), not styling the map tiles.
Working code snippet with your map styles (if you want to load them from an external file, you can, but you wouldn't use the data layer, you would just assign the styling data to a global variable and use that for the styles property):
var map;
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {
lat: 53.668398,
lng: -2.167713
},
styles: [{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#efefef"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#dedddd"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#efefef"
}]
}, {
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [{
"visibility": "on"
}]
}]
});
// Load a GeoJSON from the same server as our demo.
//map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
you need to something like this:
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {lat: 53.668398, lng: -2.167713},
styles: [
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "color": "#efefef" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#dedddd" }
]
},{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#efefef" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "on" }
]
}
]
})
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);
});