google maps → fitBounds manually - javascript

I am currently stuck with google maps v3.
I try to add bounds manually in this way, but it doesn't work!?
map.fitBounds((53.399999, 9.73215099999993), (53.717145, 10.123491999999942));

fitBounds expects an object of the type LatLngBounds, which in turn is initialized with two LatLng objects.
This should work:
sw = new LatLng(53.399999, 9.73215099999993);
ne = new LatLng(53.717145, 10.123491999999942);
bounds = new LatLngBounds(sw, ne)
map.fitBounds(bounds);
Reference:
V3 API Reference on LatLng
V3 API Reference on LatLngBounds
V3 API Reference on fitBounds()

Related

Google Maps - Remove single marker not stored in array

Many other solutions like Google Maps API v3: How to remove all markers? All involve having some kind of maps array to store the map objects for later usage.
I have a situation where there is no such array to access. I can't edit the original js that makes the maps, but I can add my own script to the page.
Is it possible to retrieve all the markers after the page loads to then remove one?
Example of how markers are currently being added by framework I have to use:
map = new google.maps.Map(document.getElementById("map_canvas"), options);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: '/pin.png',
title: data['store_title']
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Directly via the API it doesn't seem to be a way to do that.
If you don't have access to the array with the markers there isn't much to be done.

Sencha Touch 2 remove Google map Markers

i'm trying to remove all the markers from a google map using ExtJS. I'm performing a setCenter() operation (i need to remove the old center from the map) and also i want to add a new marker in the new center.
As i know, to get the google map instance i need to perform a getMap() over the map container, i.e map.getMap()
I tried with clearMarkers();, deleteMarkers(); and markers = []; but neither works. The google map object looks really weird on the Chrome Developer tools utility, at least for me.
With the addition, same problem. I'm doing that:
new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
Any help is appreciated!
Thanks.
It's very simple. To remove a marker from the map, call the setMap() method passing null as the argument.
marker.setMap(null);
Note that the above method does not delete the marker. It simply removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.
If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers. You can delete the markers by removing them from the map and then setting the array's length to 0, which removes all references to the markers.
Find an example here View example (marker-remove.html)
Read more about Google Maps Tutorial - Remove a marker
Finally i get a solution for that (maybe it's not the better way, but it works)
I decided to have a global variable that references the marker that i have to put over the map.
To define a global variable in sencha i use this approach:
Ext.application({
name: 'SIGCC',
marker: null,
....
....
});
I'm using a custom class to get an AutocompleteTextField, and when the user taps a suggested location the previous marker has to be removed and a new one is placed over the google map. Also i have to recenter the map in the new location
recenterMap: function(location){
//addressMap is the id of the xtype map component
var map = Ext.getCmp('addressMap');
map.setMapCenter({ latitude: location.lat, longitude: location.lng });
if (SIGCC.app.marker){
SIGCC.app.marker.setMap(null);
}
SIGCC.app.marker = new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
//My map is hidden before de users tap action, so i have to unhide them
map.setHidden(false);
},
As you can see, this portion of code references the global variable defined previously.
Hope this helps someone.

How to separate a special marker from a cluster in Google maps?

I am using Javascript Google Maps API V3.
There is a special marker in one cluster, but I want it always to be shown outside the cluster. Does anyone know how to do this?
You can do that in the following way:
// create your marker
var marker = ....
// mark your special marker
var markerToRemove = marker;
// create marker clusterer
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
// remove your special marker from cluster
markerClusterer.removeMarker(markerToRemove);
// put it back on map
markerToRemove.setMap(map);
The last step is necessary because MarkerClusterer removeMarker() function set map to null so marker is not visible any more.

moving marker google map API

i'm using google map API and i would like to move the makers.
I use the following code:
marker.setPosition( new google.maps.LatLng(driver.location_latitude, driver.location_longitude ) );
the problem is that it duplicate the maker instead of just moving it.
try this code
marker.setMap(null);
marker.setPosition( new google.maps.LatLng(driver.location_latitude, driver.location_longitude ) );
marker.setMap(map);
note that map is your map object.

How to easily migrate javascript version to new one for google map?

For years ago I had a hard time to do the google map with marks for my web.
I am impolanting ssl for paypal and I just checked and see the map does not work with htts:
so I entered google map for a solution and saw that the javascript has been deprectated and they recomend to upgrade to version3.
Is there an easy way to do or some tutorial, as I am so busy trying to integrate paypal and it was not easy the last time. Any tips?
This is how I have the map:
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", enter code herefunction() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.51308543049258, -4.886341094970703), 13);
// Set up three markers with info windows
var point = new GLatLng(36.50856685143835, -4.866085052490234);
var marker = createMarker(point,'<div style="width:240px">Text here<a href="link here">Link<\/a><\/div>')
map.addOverlay(marker);
Thanks
Use the v2 reference and the migration table to create a text file:
v2 v3
GMap2 google.maps.Map
GLatLng google.maps.LatLng
GInfoWindow google.maps.InfoWindow
GMapOptions google.map.MapOptions
G_API_VERSION google.maps.version
GPolyStyleOptions google.maps.PolygonOptions or google.maps.PolylineOptions
then run find/replace in one way or another:
for func in `cat deprecated.txt`
do
grep -R $func /path/to/src
done
References
Migrating to a newer version of PHP
Advanced Find & Replace / Text Expand / Macros
Conditional Awk hashmap match lookup
awk/sed: How to do a recursive find/replace of a string?
How do I move files from an old folder structure to new?
https://stackoverflow.com/questions/715457/how-do-you-implement-a-dispatch-table-in-your-language-of-choice/13999292

Categories