I have a problem with google maps V3
Code is part of example from google. I want to add listener to EACH marker, so I set marker as array. But its not working :(
can anyone help me?
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var marker = new Array(10);
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
marker[i] = new GMarker(latlng,{ draggable: true });
GEvent.addListener(marker[i] , "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker[i] , "dragend", function() {
marker[i].openInfoWindowHtml("text" + i);
});
map.addOverlay(marker[i] );
}
}
}
Google Maps v2 API is deprecated, you should use v3. See this working example using the new API: Google Maps JS API v3 - Simple Multiple Marker Example
This looks like Google maps api V2 code.
Replace GLatLng with google.maps.LatLng,
Replace GEvent with google.maps.event
Instead of map.addOverlay(marker[i]);, do marker[i].setMap(map); in V3.
For the rest, make sure to read the API documentation. There are lots of examples there that'll help you get going.
Related
I have a google map (v2) on my website which i use to get user's latitude and longitude to send them as a form. What i need is to make this map initially be centered based on user's geolocation. I understand it's not a practical question but i'm not very familiar with google maps api and all the tutorial's on web are based on google map v3 and i don't want the hassle to migrate to v3 and write all the stuff all over again. So i appreciate it if someone lead me in the right direction to get this feature working on gmap(v2). Here's how my code looks like:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(43.65323, -79.38318);
map.setCenter(center, 15);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {
draggable: true
});
map.addOverlay(marker);
document.getElementById("b-lat").value = center.lat().toFixed(5);
document.getElementById("b-longt").value = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function () {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("b-lat").value = point.lat().toFixed(5);
document.getElementById("b-longt").value = point.lng().toFixed(5);
});
GEvent.addListener(map, "moveend", function () {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {
draggable: true
});
map.addOverlay(marker);
document.getElementById("b-lat").value = center.lat().toFixed(5);
document.getElementById("b-longt").value = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function () {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("b-lat").value = point.lat().toFixed(5);
document.getElementById("b-longt").value = point.lng().toFixed(5);
});
});
}
See my other post: Android maps v2 - get map zoom
To simply zoom in, use:
float zoomLevel = 20.0f;
map.animateCamera(CameraUpdateFactory.zoomTo(zoomLevel);
To zoom to the marker, use:
LatLng l = new LatLng(LATPOSITION, LONGPOSITION); float zoomLevel =
20.0f; map.animateCamera(CameraUpdateFactory.newLatLngZoom(l, zoomLevel));
Add these where you want the zoom to happen.
Note: This is for Java android, you may need to edit it for the web.
I found the solution through navigator object. after initializing the map i found the user's lat&longt with this block of code:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
userLatitude = position.coords.latitude;
userLongitude = position.coords.longitude;
center = new GLatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(center, 15);
addMapMarker();
});
if(typeof userLatitude == 'undefined' && typeof userLongitude == 'undefined') {
center = new GLatLng(43.65323, -79.38318);
map.setCenter(center, 15);
addMapMarker();
}
} else {
center = new GLatLng(43.65323, -79.38318);
map.setCenter(center, 15);
addMapMarker();
}
I am converting the V2 code to V3. In the below two functions, they are used the getBoundsZoomLevel function. Instead of that function how to use in google map v3.
please help.
function fitSpecifiedMarkers(){
var bounds = new google.maps.LatLngBounds();
for (var i = markers.length-1; i>=0; i--) {
bounds.extend(markers[i].getPosition());
}
var zoomLvl = this.map.getBoundsZoomLevel(bounds); // V2 function, not available in v3.
if (zoomLvl > this.maximumZoom) {
zoomLvl = this.maximumZoom;
}
this.map.setCenter(bounds.getCenter(), zoomLvl);
}
function clusterMarker() {
var bounds = new google.maps.LatLngBounds();
var listen = google.maps.event.addListener(marker, 'click', function() {
// Center & zoom map to contain all map markers in cluster group when clicked
self.map.setCenter(bounds.getCenter(), self.map.getBoundsZoomLevel(bounds));
}
}
Thanks in Advance, for this help.
In your situation you can use Map.fitBounds(LatLngBounds) this "Sets the viewport to contain the given bounds."
I have searched google and this site for a solution, and have tried many approaches, none of which solve my problem.
I'm using a standard approach for adding multi-markers to my GMaps app with javascript. I found that after a certain amount of pins(1000+), the pins no longer show up on the map :(
My question: is it possible to load 1000-to-10000 pins with Google Maps??
Can someone please explain why there is a limit for pins with Google Maps API v3??
Assuming that Google Maps does not support my requirement for loading thousands of pins, are there any other similar APIs which can load thousands of pins??
I think there is no such limit, check this page:
https://code.google.com/apis/ajax/playground/#markers -- I succesfully loaded 10000 markers on this google map:
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10000; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
}
But as the number of markers increase, there could be required more time for the web browser to process them.
How would one go about implementing the same type of marker grouping as found on this website? http://clevertrail.com/
Is this something that is delivered by the google maps api? If not, how can one create these kinds of groupings?
Any suggested solutions is greatly appreciated!
You can use marker cluster for that: http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries. It does the grouping in JS but it's not very efficient.
you can try this code with your respective locations and values..
you need to include the marker cluster js to your code..get it from here markerclustrer.js
<script>
var markerCluster = [];
var all_markers = [];
var infowindows = [];
var map;
function initialize(){
var mapProp = {
center:center,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
addmarker(lat,long); //creating the marker....; function call can be looped
markerCluster = new MarkerClusterer(map, all_markers); //setting the markers' array as a cluster on google maps
}
function addmarker(lat,lng)
{
var mycenter = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position:mycenter,
});
all_markers.push(marker); //making an array of markers
}
</script>
After some investigating they seem to be using a third party plugin/extension to handle the marker grouping.. found on this page: http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
I am building a cycle information site and want to be able to grab the users location from their iPhone so i update my Google map and provide the user with relevant information. There is a Drupal module called Geolocation which uses the HTML5 option to do this and i have found the code which it is performing the task in the module below.
// START: Autodetect clientlocation.
// First use browser geolocation
if (navigator.geolocation) {
browserSupportFlag = true;
$('#geolocation-help-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').append(Drupal.t(', or use your browser geolocation system by clicking this link') +': <span id="geolocation-client-location-' + i + '" class="geolocation-client-location">' + Drupal.t('My Location') + '</span>');
// Set current user location, if available
$('#geolocation-client-location-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').click(function() {
navigator.geolocation.getCurrentPosition(function(position) {
latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
Drupal.Geolocation.maps[i].setCenter(latLng);
Drupal.Geolocation.setMapMarker(latLng, i);
Drupal.Geolocation.codeLatLng(latLng, i, 'geocoder');
}, function() {
Drupal.Geolocation.handleNoGeolocation(browserSupportFlag, i);
});
});
}
Does anybody have any Google Maps API V3 experience of implementing this or similar? I would prefer the user to have to click "My Location" or equivalent to then use their iPhone's location to update the map rather than request it automatically. This is my Map and the array of markers that i have on it. How can i utilise the iPhones location to update it?
function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.51251523, -0.133201961),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
setMarkers(map, spots);
}
var spots = [
['Marylebone', 51.51811784, -0.144228881, '2.png', 2901, 'Broadcasting House - Marylebone</br>Available Bikes: 1</br>Number of Docks: 13</br> View more information about this dock'],
['Fitzrovia', 51.51991453, -0.136039674, '3.png', 2908, 'Scala Street - Fitzrovia</br>Available Bikes: 8</br>Number of Docks: 21</br> View more information about this dock'],
['Fitzrovia', 51.52351808, -0.143613641, '3.png', 2923, 'Bolsover Street - Fitzrovia</br>Available Bikes: 6</br>Number of Docks: 19</br> View more information about this dock'],
['Fitzrovia', 51.52025302, -0.141327271, '3.png', 2975, 'Great Titchfield Street - Fitzrovia</br>Available Bikes: 5</br>Number of Docks: 19</br> View more information about this dock'],
['Bloomsbury', 51.51858757, -0.132053392, '3.png', 2982, 'Bayley Street - Bloomsbury</br>Available Bikes: 12</br>Number of Docks: 25</br> View more information about this dock']
];
function setMarkers(map, locations) {
var image1 = new google.maps.MarkerImage('amber-spot.png',
new google.maps.Size(30, 36),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var spot = locations[i];
var myLatLng = new google.maps.LatLng(spot[1], spot[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: spot[3],
title: spot[0],
zIndex: spot[4],
html: spot[5]
});
bounds.extend(myLatLng);
map.fitBounds(bounds);
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
}
thanks
Lee
First you will need a javascript function that will be fired from a button press, or a link click. This function will use the geolocation api available through html5 to check if the user can provide you with their location and grab it if so. The remainder of the function will use the google maps api to pan to that lat lng coordinate and set the zoom level appropriately.
Here is the google maps api map object which has the methods you need:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
And this site has a great overview of basically everything you are trying to do:
http://www.html5laboratory.com/geolocation.php
Finally don't forget to save the location in your database or client side javascript array. If you are saving the data, warn the user of that for privacy implications.