Develop Reference

How to centre the google map after fitbound

I need some help with Google maps.
I am not able to reduce the zoom level in google maps after fitbound.
The problem is that I am getting a very highly zoomed google map. I have tried setting the zoom level to 5 (as you can see in the codes) but this has no effect to the very highly zoomed map.
I want to achieve this
But right now its coming like this : http://redstoneinfotech.com/OSAcontact/
Here is the map.js
window.map = {
map_type: 'ROADMAP',
map_zoom: 5,
map_style: 'blackwhite',
map_scrollable: 'on',
marker: 'show',
label: ['Castle Hill', 'Sydney', 'Melbourne', 'Milton', 'Brooklyn Park', 'Wangara '],
address: '',
latlng: ['-33.7301484, 150.9626532', '-33.8473567, 150.6517813',
'-37.970154, 144.4926753 ', ' - 27.4691402, 152.9962768 ',
' - 34.9303517, 138.5346949 ', ' - 31.7928896, 115.8157212 '
],
center_latlng: '',
markerURL: 'assets/images/marker.png',
auto_center: true,
};
'use strict';
jQuery(document).ready(function($) {
$('.google-map').each(function() {
var mapDiv = $(this);
var mapData = window[mapDiv.attr('id')];
function createMap() {
var style = [{
'stylers': [{
'saturation': -100
}]
}];
var options = {
zoom: parseInt(mapData.map_zoom, 5),
scrollwheel: false,
draggable: mapData.map_scrollable === 'on',
mapTypeId: google.maps.MapTypeId[mapData.map_type]
};
if (mapData.map_style === 'blackwhite') {
options.styles = style;
}
return new google.maps.Map(mapDiv[0], options);
}
// create map
var map = createMap();
// create bounds in case we dont have center map coordinates
// every time a marker is added we increase the bounds
var bounds = new google.maps.LatLngBounds();
function addMarker(position, index) {
if (mapData.marker === 'show') {
var image = {
url: mapData.markerURL,
size: new google.maps.Size(30, 48),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(10, 40)
};
var marker = new google.maps.Marker({
position: position,
icon: image,
map: map
});
// extend bounds to encase new marker
bounds.extend(position);
// add label popup to marker
if (mapData.label[index] !== undefined) {
var infoWindow = new google.maps.InfoWindow({
content: mapData.label[index]
});
google.maps.event.addListener(marker, 'click', function(e) {
infoWindow.open(map, this);
});
}
}
}
// centre map
var centerMapWithCoordinates = !mapData.auto_center;
if (centerMapWithCoordinates) {
if (mapData.center_latlng !== undefined) {
var center_lat_lng = mapData.center_latlng.split(',');
var center_map = new google.maps.LatLng(center_lat_lng[0], center_lat_lng[1]);
map.setCenter(center_map);
} else {
console.log('You have not set any coordinates for the map to be centered at.');
}
}
// create markers
if (mapData.address) {
// lookup addresses
var markerAddressCount = 0;
$.each(mapData.address, function(index, address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (undefined !== results[0]) {
var location = results[0].geometry.location;
var position = new google.maps.LatLng(location.lat(), location.lng());
addMarker(position, index);
}
// increment count so we can keep track of all markers loaded
markerAddressCount++;
// if all markers are loaded then fit map
if (!centerMapWithCoordinates && markerAddressCount === mapData.address.length) {
map.fitBounds(bounds);
}
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
});
} else if (undefined !== mapData.latlng) {
for (var i = 0; i < mapData.latlng.length; i++) {
var coordinates = mapData.latlng[i].split(',');
var position = new google.maps.LatLng(coordinates[0], coordinates[1]);
addMarker(position, i);
}
if (!centerMapWithCoordinates) {
map.fitBounds(bounds);
}
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(5);
google.maps.event.removeListener(boundsListener);
});
});
});
I have tried with many options but none of them is working. Please help.

As much as I can see, the problem is with the Google Maps sdk. Why? because they are calling to bounds_changed callback before the fitBounds is actually ended.
That's why it causes the zoom not to work because they didn't finish to zoom it as part as the bounds changing in fitBounds.
So the solution is to put the setZoom in setTimeout. In this way, this code will run only after the execution of the current process - fitBounds.
setTimeout(() => {
this.setZoom(5);
}, 0);
It works for me. Let me know if it works for you.

Google Maps API v3 Markers only load sometimes

I have a map-making tool that is built with the Google Maps API V3. It allows users to enter two or more locations and produce a map and route. I also have a checkbox that, when clicked, shows markers indicating nearby points of interest.
When I first built the tool, I think it worked well every time. Recently, though, I've noticed that the markers do not always appear when the checkbox is clicked. The map and routing work fine, but the markers only work occasionally. This error seems to occur when they don't work:
Uncaught ReferenceError: map is not defined
It references a section of the "cmarkers" section of javascript (see below).
Background detail: This is part of a Rails web app and a webpage / layout called "Itineraries". When you land on the itineraries webpage and click on the "Map Maker" icon, the map-making tool appears. It's loaded in an i-frame, it's called "map.html.erb", and the map view lives in /views/itineraries. All of the javascript for the map maker lives in the Itineraries layout file, however.
Based on reviewing these posts, I think it might be something in the way that I've ordered or initialized the code, and I think the main culprit is likely in that "cmarkers" section of the code.
Google Maps API Sometimes Not Showing Markers
Google maps api(v3) doesn't show markers
Google Maps API v3 javascript Markers don't always load
I've tried several different changes, but each has either not worked or stopped the map from initializing. Here is the javascript; please note that the API key and other small sections are redacted. Below it is the code for the markers.
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false"></script>
<script type='text/javascript'>
$(function(){
var directionsDisplay;
var map;
function overlaysClear() {
if (markersArray) {
for( var i = 0, n = markersArray.length; i < n; ++i ) {
markersArray[i].setVisible(false);
}
}
}
function overlaysShow() {
if (markersArray) {
for( var i = 0, n = markersArray.length; i < n; ++i ) {
markersArray[i].setVisible(true);
}
}
}
$("#showmapview").click(function() {
overlaysClear();
$('#mapeach').attr('checked', false);
});
$('#mapeach').change(function() {
if( $('#mapeach').attr("checked")) {
overlaysShow();
}
else {
overlaysClear();
}
});
cmarkers();
google.maps.event.addDomListener(window, 'load', initialize);
});
var directionsService = new google.maps.DirectionsService();
var markersArray = [];
var arrInfoWindows = null;
function initialize() {
var rendererOptions = {
draggable: true,
panel:document.getElementById('directions_panel')
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var waypts = [];
var checkboxArray = document.getElementById("waypoints");
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location:checkboxArray[i].value,
stopover:true
});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
};
function cmarkers() {
$.getJSON( "/mapeach.js", {}, function( data ) {
$.each( data, function( i, item ) {
var loc = item.mainlocation;
$("#markers").append('<li>' + loc.nickname + '</li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
map: map,
title: loc.nickname,
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
});
google.maps.event.addListener(marker, 'click', function() {
if (arrInfoWindows != null) {
arrInfoWindows.close();
}
infowindow.open(map,marker);
arrInfoWindows = infowindow;
});
});
});
};
</script>
The mapeach.js file is formatted as below:
[{"mainlocation":{"latitude":"40.706352","nickname":"First Location","id":100000,"longitude":"-73.987650"}},{"mainlocation":{"latitude":"34.061148","nickname":"Second Location","id":100001,"longitude":"-118.273067"}}]

I was able to solve this problem by moving the cmarkers code inside the initialize. I think that the javascript wasn't making clear that the map variable in the initialize was also the map variable in the cmarkers function (sorry if the language isn't precise; I'm not great in js). See below:
function initialize() {
var rendererOptions = {
draggable: true,
panel:document.getElementById('directions_panel')
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
cmarkers();
function cmarkers() {
$.getJSON( "/mapeach.js", {}, function( data ) {
$.each( data, function( i, item ) {
var loc = item.mainlocation;
$("#markers").append('<li>' + loc.nickname + '</li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
map: map,
title: loc.nickname,
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
});
google.maps.event.addListener(marker, 'click', function() {
if (arrInfoWindows != null) {
arrInfoWindows.close();
}
infowindow.open(map,marker);
arrInfoWindows = infowindow;
});
});
});
};
Special credit to this post for giving me the idea: can't see google marker

Draw a route on google map on click

What I am trying to do is on click google maps, place a marker, and draw a route between these markers. This works but the problem I'm facing is as follows: (please view the images of map)
(1) When I click three times on google map, the route is drawn perfectly. (meaning first I click A then B and then C location)
(2) Then if I click a forth time on google map, the location must be D but the map looks as follows:
Here the B location is replaced or hidden and in place of B, C is displayed and same...
(3) If I click a fifth time on google map, the location should be E, but the map looks like:
In short, if I click five times on google map, the route should be 'A,B,C,D,E'. Instead it is displayed as 'A,E,F,G,H'.
The full code is as follows:
<script>
var waypts=[];
var ways=[];
function initialize() {
var geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(23.0171240, 72.5330533),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
var input=e.latLng;
var lat = parseFloat(input.lat());
var lng = parseFloat(input.lng());
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var add=results[1].formatted_address;
waypts.push({
location:add,
stopover:true
});
//alert(JSON.stringify(waypts));
if(waypts.length>2) {
for ( var i = 1; i <= waypts.length - 2 ; i++) {
ways.push({
location:waypts[i].location,
stopover:true
});
}
}
makeroute(waypts);
}
});
});
<!-- ************** for route between markers ******************* -->
function makeroute(waypts){
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: false, //false it if you want a marker from the direction service
polylineOptions: {
strokeColor: 'green', //"black",
strokeOpacity: 1.0,
strokeWeight: 3
}
});
var start = waypts[0].location;//"Bopal, Ahmedabad, Gujarat, India";
var end = waypts[waypts.length-1].location;//"Nikol, Ahmedabad, Gujarat, India";
if(waypts.length>1) {
var request = {
origin:start,
destination:end,
waypoints:ways,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
}
}
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
//map: map
});
// map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
LATER UPDATE
I use directionsDisplay.setPanel(document.getElementById('a')); for the full route information.
It display when ever I click on google map, the routes is repeat. Meaning on the first click A, on second click A to B, on third A to B to C not B to C etc. It also display that some points merged. For example B and C have same location and on the map C is only displayed.

You need to clear out the waypoints array ("ways") each time you add a new point. Each time you add a point, the start point stays the same but the old end point needs to be added to the waypoints array, and the new point is the end point. Currently you never clear out the "ways" array. Changing this:
if(waypts.length>2) {
for ( var i = 1; i <= waypts.length - 2 ; i++) {
ways.push({
location:waypts[i].location,
stopover:true
});
}
}
makeroute(waypts);
To this:
if(waypts.length>2) {
ways = [];
for ( var i = 1; i <= waypts.length - 2 ; i++) {
ways.push({
location:waypts[i].location,
stopover:true
});
}
}
makeroute(waypts);
Works for me.

How do I get more results from Google Places / Maps

I am using google maps and I am trying out places API, but something makes me wonder...
If you load maps.google.com and go to Kuala Lumpur, then type "food" in the search-box, you will see hundreds of restaurants on the map. I would like to get these into my own maps.
Using the Places API, I have pretty much copied their example code:
function initialize() {
var plat = 3.15;
var plong = 101.7;
var ppos = new google.maps.LatLng(plat, plong);
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
zoom: 10,
center: ppos
};
map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);
var request = {
location: ppos,
radius: '10000'
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: place.icon
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent("<b>" + place.name + "</b><br/>" + place.vicinity);
infowindow.open(map, this);
});
}
When I execute this code, I do get results, but only very few and only major locations like a few malls and museums. So, How do I get all that beautiful data, that I see on Google's own map?

So it turned out there were a number of problems:
Categorization is broken in Inodesia, so using keyword instead solved the problem, as in:
var request= {
location: ppos,
radius: 10000,
keyword: 'restaurant' }
keyword takes a string rather than an array, and radius takes a number rather than a string. You can see a summary of the types for the request here: http://code.google.com/apis/maps/documentation/javascript/reference.html#PlaceSearchRequest

Adding ID's to google map markers

I have a script that loops and adds markers one at a time.
I am trying to get the current marker to have an info window and and only have 5 markers on a map at a time (4 without info windows and 1 with)
How would I add an id to each marker so that I can delete and close info windows as needed.
This is the function I am using to set the marker:
function codeAddress(address, contentString) {
var infowindow = new google.maps.InfoWindow({
content: contentString
});
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
infowindow.open(map,marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}

JavaScript is a dynamic language. You could just add it to the object itself.
var marker = new google.maps.Marker(markerOptions);
marker.metadata = {type: "point", id: 1};
Also, because all v3 objects extend MVCObject(). You can use:
marker.setValues({type: "point", id: 1});
// or
marker.set("type", "point");
marker.set("id", 1);
var val = marker.get("id");

Just adding another solution that works for me.. You can simply append it in the marker options:
var marker = new google.maps.Marker({
map: map,
position: position,
// Custom Attributes / Data / Key-Values
store_id: id,
store_address: address,
store_type: type
});
And then retrieve them with:
marker.get('store_id');
marker.get('store_address');
marker.get('store_type');

I have a simple Location class that I use to handle all of my marker-related things. I'll paste my code below for you to take a gander at.
The last line(s) is what actually creates the marker objects. It loops through some JSON of my locations, which look something like this:
{"locationID":"98","name":"Bergqvist Järn","note":null,"type":"retail","address":"Smidesvägen 3","zipcode":"69633","city":"Askersund","country":"Sverige","phone":"0583-120 35","fax":null,"email":null,"url":"www.bergqvist-jb.com","lat":"58.891079","lng":"14.917371","contact":null,"rating":"0","distance":"45.666885421019"}
Here is the code:
If you look at the target() method in my Location class, you'll see that I keep references to the infowindow's and can simply open() and close() them because of a reference.
See a live demo: http://ww1.arbesko.com/en/locator/ (type in a Swedish city, like stockholm, and hit enter)
var Location = function() {
var self = this,
args = arguments;
self.init.apply(self, args);
};
Location.prototype = {
init: function(location, map) {
var self = this;
for (f in location) { self[f] = location[f]; }
self.map = map;
self.id = self.locationID;
var ratings = ['bronze', 'silver', 'gold'],
random = Math.floor(3*Math.random());
self.rating_class = 'blue';
// this is the marker point
self.point = new google.maps.LatLng(parseFloat(self.lat), parseFloat(self.lng));
locator.bounds.extend(self.point);
// Create the marker for placement on the map
self.marker = new google.maps.Marker({
position: self.point,
title: self.name,
icon: new google.maps.MarkerImage('/wp-content/themes/arbesko/img/locator/'+self.rating_class+'SmallMarker.png'),
shadow: new google.maps.MarkerImage(
'/wp-content/themes/arbesko/img/locator/smallMarkerShadow.png',
new google.maps.Size(52, 18),
new google.maps.Point(0, 0),
new google.maps.Point(19, 14)
)
});
google.maps.event.addListener(self.marker, 'click', function() {
self.target('map');
});
google.maps.event.addListener(self.marker, 'mouseover', function() {
self.sidebarItem().mouseover();
});
google.maps.event.addListener(self.marker, 'mouseout', function() {
self.sidebarItem().mouseout();
});
var infocontent = Array(
'<div class="locationInfo">',
'<span class="locName br">'+self.name+'</span>',
'<span class="locAddress br">',
self.address+'<br/>'+self.zipcode+' '+self.city+' '+self.country,
'</span>',
'<span class="locContact br">'
);
if (self.phone) {
infocontent.push('<span class="item br locPhone">'+self.phone+'</span>');
}
if (self.url) {
infocontent.push('<span class="item br locURL">'+self.url+'</span>');
}
if (self.email) {
infocontent.push('<span class="item br locEmail">Email</span>');
}
// Add in the lat/long
infocontent.push('</span>');
infocontent.push('<span class="item br locPosition"><strong>Lat:</strong> '+self.lat+'<br/><strong>Lng:</strong> '+self.lng+'</span>');
// Create the infowindow for placement on the map, when a marker is clicked
self.infowindow = new google.maps.InfoWindow({
content: infocontent.join(""),
position: self.point,
pixelOffset: new google.maps.Size(0, -15) // Offset the infowindow by 15px to the top
});
},
// Append the marker to the map
addToMap: function() {
var self = this;
self.marker.setMap(self.map);
},
// Creates a sidebar module for the item, connected to the marker, etc..
sidebarItem: function() {
var self = this;
if (self.sidebar) {
return self.sidebar;
}
var li = $('<li/>').attr({ 'class': 'location', 'id': 'location-'+self.id }),
name = $('<span/>').attr('class', 'locationName').html(self.name).appendTo(li),
address = $('<span/>').attr('class', 'locationAddress').html(self.address+' <br/> '+self.zipcode+' '+self.city+' '+self.country).appendTo(li);
li.addClass(self.rating_class);
li.bind('click', function(event) {
self.target();
});
self.sidebar = li;
return li;
},
// This will "target" the store. Center the map and zoom on it, as well as
target: function(type) {
var self = this;
if (locator.targeted) {
locator.targeted.infowindow.close();
}
locator.targeted = this;
if (type != 'map') {
self.map.panTo(self.point);
self.map.setZoom(14);
};
// Open the infowinfow
self.infowindow.open(self.map);
}
};
for (var i=0; i < locations.length; i++) {
var location = new Location(locations[i], self.map);
self.locations.push(location);
// Add the sidebar item
self.location_ul.append(location.sidebarItem());
// Add the map!
location.addToMap();
};

Why not use an cache that stores each marker object and references an ID?
var markerCache= {};
var idGen= 0;
function codeAddress(addr, contentStr){
// create marker
// store
markerCache[idGen++]= marker;
}
Edit: of course this relies on a numeric index system that doesn't offer a length property like an array. You could of course prototype the Object object and create a length, etc for just such a thing. OTOH, generating a unique ID value (MD5, etc) of each address might be the way to go.

Marker already has unique id
marker.__gm_id