Google map API geolocation after first display of the map - google-maps-api-3

This code takes a big list of (400) markers and adds it to the map, at the end, it shows the whole map including all the markers.
What I have tried to achieve is: when geolocation is available, center the map on location, zoom to level 16 and refresh the map to show it, otherwise, let the whole big map show... I have read and tried many different things, but the geolocation must happen before the map is created. I want to make it happen after. I show you my code here and the temporary link to the working site: http://studioteknik.co/brasseursillimites.com/detaillants/
function initialize()
{
var map = new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in locations) {
var p = locations[i];
var latlng = new google.maps.LatLng(p[1], p[2]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

Here is a simple example of geolocation. Just add the geolocation code anywhere after the map object is created. If the user doesn't allow geolocation, the map will be shown at the default location / zoom level.
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Geolocation code
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(16);
});
}
}
initialize();
JSFiddle demo

Related

How to add a marker on a groundoverlay by a click?

I developed a map application using gmap2. I used a groundoverlay (a temperature map) to help users to determine the location of interest and click to select. After gmap2 being replaced by gmap3, it stops working. The bigger problem is that I could not find a way to add markers on the groundoverlay by clicking in gmap3. Someone raised a similar question, but no answer has been available. I hope that such a function is not lost in gmap3. Your help is appreciated.
enter code here
<script>
var map;
var mapCenter = new google.maps.LatLng(54.508742, -125.120850);
var pngBounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.3367, -139.0402),
new google.maps.LatLng(59.99008, -114.1095));
function initialize() {
var mapProp = { center: mapCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds);
groundoverlay.setMap(map);
google.maps.event.addListener(map, 'click', function (event) { placeMarker(event.latLng); });
}
function placeMarker(location) {
var marker = new google.maps.Marker({ position: location, map: map, draggable: true });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In v3 you have to make the groundOverlay non-clickable
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds, **{clickable:false}**);
use below code as simple as that..
let overlayGeoMapImg = new google.maps.GroundOverlay(
'../assets/GNDVI.png',
imageBounds);
overlayGeoMapImg.setMap(map);
google.maps.event.addListener(overlayGeoMapImg, 'click', (event: any) => {
this.ngZone.run(() => {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Hello World!'
});
});
});

Count and output number of markers bound by circle radius

I have a map thats populated with markers of places from a fusion table. I'm taking the users location and displaying a circle of radius 10 miles from their location. Here is my code - http://connormccarra.com/sandbox/map/. How can I use the api to count the number of markers bound by the circle and output that number in the footer?
Cheers!
Relevant code:
var map;
function Initialize() {
var MapOptions = {
zoom: 7,
center: new google.maps.LatLng(53.4125694, -8.245014),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions);
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: '1OPU6utSjRYwJSFK-EXdaGmt2KgLTq2loVIjS3AA'
}
});
layer.setMap(map);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
map: map,
position: pos,
content: 'You are here!'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 16093, // 10 miles in metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var count = mgr.getMarkerCount(circle);
document.getElementById("Address").innerHTML += count + "<BR>";
google.maps.event.addDomListener(window, 'load', initialize);
//Maps API loaded, now load customizations
var element = document.createElement('script');
element.src = 'template.js';
element.type = 'text/javascript';
var scripts = document.getElementsByTagName('script')[0];
scripts.parentNode.insertBefore(element, scripts);
}
The markers created by a FusionTableLayer are not real markers, there is no way to get them as a kind of list to filter them(you can't get any details for the markers, except you click them).
But you may request the FusionTableAPI with a spatial condition(via AJAX, jsonp is supported).
The syntax for the query:
SELECT COUNT() from tableId
WHERE ST_INTERSECTS('Address',CIRCLE(LATLNG(lat,lng),10000))
How to send a query : https://developers.google.com/fusiontables/docs/v1/sql-reference
Demo(using data of another FusionTable because your table is protected):
http://jsfiddle.net/doktormolle/bAtgf/
Simplest way: use the geometry library computeDistanceBetween method. If the distance from the user's location is less than 10 miles, the marker is in the circle.
I suggest you first fetch all the coordinates of your FusionTablesLayer.
Here is an example which was used in the sidebar
http://www.geocodezip.com/v3_FusionTables_AfricaMap_kml_sidebar.html
Then using a loop statement you can use the computeDistanceBetween function.
Detect If Marker is Within Circle Overlay

KML file more than 2000 placemarks

I want to import kml files that contains more than 2000 placemarks into googla map.
I use google api v3.
I can only show 200 placemarks.
I know that I can use more layers, but I want only one because I have to refresh it weekly and I don't want to split every time.
Thanks for your replays
THIS IS THE CODE:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.25,19.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
loadKmlLayer(map);
}
function loadKmlLayer(map) {
var ctaLayer2 = new google.maps.KmlLayer('https://.../asdf.kml', {
suppressInfoWindows: false,
preserveViewport: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
If your KML isn't very complex, you could try rendering it with a third-party KML parser (geoxml3 or geoxml-v3), see if that works (or points to the problem you are having with KmlLayer)
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.10,19.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating the JSON data
var json = [
DATA HERE LIKE:
{"title" :"City ZIP CODE STREET" , "lat" :47.2876 , "lng" :20.4978 ,"description" :"YOUR DESCRIPTION"},
]
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++)
{
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title,
// icon: iconimage
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})
//OnClick event
(marker, data);
}
} })();

Auto refresh Google Map

I'm looking for a method to my Google map auto refresh for each "n" seconds, now i'm refreshing all page, but i must to refresh only the map,
follow my JS code:
var DEFAULT_ZOOM = 14;
function initialize() {
var map;
var latlng = new google.maps.LatLng(-19.0, -59.0);
var myOptions = {
zoom: parseInt(getCookie("zoom_gm")),
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
initMarkers(map);
var zm = DEFAULT_ZOOM;
google.maps.event.addListener(map, 'zoom_changed',
function(){
zm = map.getZoom();
setCookie("zoom_gm", zm);
}
);
}
You will have to retrieve the new data using AJAX. Once you received the data, you have to walk the array/object you've received and add the new Markers. Depending on what you receive(maybe the response contains coordinates you've already set) you need to remove existing markers by using markerObj.setMap(null) .
That's all I can suggest so far, you're very stingy with informations.

Google Maps Javascript API V3 - Want to add a marker and return the LatLng of the marker

I have a question relevant to Google Maps API. I am learning how to use the Google Maps API. I can just show the map in the div tag, but what I want is to be able to click on the map and show the marker and return the LatLng of the clicked point.
function initialize(v_lat,v_long,v_place) {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map( document.getElementById("map_canvas") , myOptions );
}
here is the click event example
where you click on map marker place on that point and click on marker which will return the latlng of that location.
try this
var marker;
google.maps.event.addListener(map, 'click', function() {
if(marker==null){
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
alert("latlng" + marker.getPosition());
});
}
});
here is the link for google map v3 you can find all tutorials related to the map
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://code.google.com/apis/maps/documentation/javascript/events.html

Resources