Adding a custom google map marker pin

Adding a custom google map marker pin - javascript

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'
});

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);
}

Not Able to Turn Off Hiking Trails Layer in Google Maps

I am trying to turn off Google Maps Hiking Trails is a Custom style map but it is still showing in the map.
As you can see I almost turned off all the layers but the hiking layer still there!
Can you please let me know how to remove it?
[
{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "off" }
]
}
]
demo (jsfiddle from comments)
code snippet:
var map;
$(document).ready(function() {
var latlng = new google.maps.LatLng(49.395505, -123.203317);
var myOptions = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.set('styles', [{
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "off"
}]
}]);
});
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 25px;
}
#map_canvas {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>

To remove them, use this suggested work around:
[
{
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" }
]
}
]
(from the related issue in the issue tracker: Feature request: Add Feature Type for Ski Runs)
proof of concept fiddle
code snippet:
var map;
$(document).ready(function() {
var latlng = new google.maps.LatLng(49.395505, -123.203317);
var myOptions = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.set('styles', [
{
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" }
]
}
]);
});
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 25px;
}
html,
body,
.container,
.well,
#map_canvas {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>

Using JSON files in Google Maps styling

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" }
]
}
]
})

Google map not fully loading [duplicate]

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);
});

We Keep Coding

JavaScript is the programming language of the Web.

Adding a custom google map marker pin - javascript

Related

Add a layer and a style in google maps api

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

Not Able to Turn Off Hiking Trails Layer in Google Maps

Using JSON files in Google Maps styling

Google map not fully loading [duplicate]

Categories

Resources