Develop Reference

Control the zoom level of Google Mx

I've made a Wordpress website with a template tool 'beaver builder'. That tool has a google map module, but that doesn't work very well. For example, I can't change to zoom level and center.
I also want to show a specific marker in a cluster.
This is the website page: http://www.depot-rato.be/het-project/
Is there a way to control the google map with some Javascript or jQuery?
jQuery('.gmap').setZoom(19);
Thanks in advance.

I've found a solution:
jQuery(document).ready(function($) {
var aLocation = { lat: 51.009054, lng: 4.509285};
$('.gmap').gmap('get','map').setOptions(
{
'zoom': 18,
'center': aLocation
}
);
});

I do it like this(at map initialization, resets the map and markers):
var aLocation= { lat: 48.4728146, lng: 7.499930100000029 };
map = new google.maps.Map(document.getElementById('myMap'), {
zoom: 5,
center: aLocation,
title: 'myMapTitle',
});
or like this(this one shouldn't initialize the map or markers):
map.setZoom(5);
map.setCenter(aLocation);
map.panTo(aLocation);// no need for this one, if you used the one above
You can try it here(click on the marker):
https://codepen.io/sam67/pen/KRGLjY

How can I disable map repeater in the World Google Map API

I am using world map via Google Map API and World map is going to repeat. I want to disable the same. I am using this code
<div id="map" style="width:100%;height:700px"></div>
<script>
var lat = 0;
var lang = 0;
var centerLatLng = new google.maps.LatLng(lat, lang);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: centerLatLng,
scrollwheel: false,
zoom: 3,
minZoom: 1
});
</script>

If you don't want any repeats, you need to control the minimum zoom allowed and the width of your map to be less than or equal to one width of of the base tiles at the minimum zoom level allowed on your map. Check out this answer!

highlight all routes (google maps) within a specific circle radius

I am using Google Maps Javascript API v3,
What i would like to do is to highlight all routes within a specific circle radius when choosing a point in the map (point coordinates and circle radius are input parameters).
I tried to use the Directions Services and i did manage to display all possible routes when origin and destination points and travelMode are specified and the provideRouteAlternatives option is set to true.
When setting the origin point to be the cirle center, is there way to set multiple destinations points (points on the circle perimeter), and then loop over availables routes and highlight them using Directions Service?
P.S.: i am not trying to draw a circle around a point but to highlight all roads within the circle radius.
Thanks.

This is a just-for-fun answer.
Not really an answer because it really feels like a dirty little hack, and also I am not sure to understand what exactly you are trying to highlight (is it all streets or the results of a Directions request — this is unclear from your question).
But basically, I added 2 maps. The first one is the base map and the other one is positioned on top of the first one, with a border radius, and styles applied.
I then synchronize both maps so that they both move relatively (when panning / zooming).
var myLatlng = new google.maps.LatLng(51.51, -0.12);
var styles = [{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff3380"
}]
}];
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var roundedMapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
styles: styles
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var roundedMap = new google.maps.Map(document.getElementById("map-rounded"), roundedMapOptions);
google.maps.event.addListener(map, 'drag', function () {
roundedMap.setCenter(map.getCenter());
});
google.maps.event.addListener(roundedMap, 'drag', function () {
map.setCenter(roundedMap.getCenter());
});
google.maps.event.addListener(map, 'idle', function () {
roundedMap.setCenter(map.getCenter());
});
google.maps.event.addListener(map, 'zoom_changed', function () {
roundedMap.setZoom(map.getZoom());
});
Note on the use of the idle event listener:
If you are dragging the map very quickly, sometimes the sync is kind of lost. So with the idle event listener, the maps are re-synced after a drag.
Note that I added the below CSS rule to hide the copyright on the rounded map:
#map-rounded .gm-style-cc {
display: none;
}
This is clearly against Google Maps TOS but since it is still there on the base map, I would think this is a fair or acceptable misuse of the API :)
JSFiddle demo

Google maps displays many versions of same map upon zooming out

I am trying to zoom out of the google map,this is what happens:
How can I stop this kind of behaviour from occuring?

Include the minZoom property in your map options:
...
var mapOptions = {
minZoom: 2
}
map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
...
This will limit the amount that user will be able to zoom out, which will prevent the map from repeating.
More info: https://developers.google.com/maps/documentation/javascript/reference

Set maxZoom property for map .
var mapOptions = {
zoom: 11,
center: tokyo,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', showMaxZoom);
Look at here : https://developers.google.com/maps/documentation/javascript/maxzoom

Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.

Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.
My custom-styled map pulls from a KML file with about 20 Placemarks.
For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.
Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).
I think I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.
Thank you in advance!
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Thanks to #SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position,
pixelOffset: new google.maps.Size(300, 0),
})
infowindow.open(map);
}

antyrat posted about this with an infoWindow to the right of the marker here:
Googlemap custom infowindow
See the link in the accepted answer.
EDIT: Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX
var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map});
});
}
Google Maps API says:
Additionally, a click on a KML feature generates a KmlMouseEvent,
which passes the following information:
position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally
the clicked location for polygons, polylines, and GroundOverlays, but
the true origin for markers.
pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically
0,0 but for markers includes the height of the marker.
featureData contains a JSON structure of KmlFeatureData.
See this page for more info: KML Feature Details