How do I add geolocation to this code? - javascript

I am currently trying to add geolocation functionality to the following code:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(51.507059, -0.122631);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var html = "<table/>" +
"<tr><td>Name:</td><td><input id='name' type='text'/></td></tr>" +
"<tr><td><br/>Description:</td><td><input id='description' type='text'/></td></tr>" +
"<tr><td/><td><br/><center><input onclick='saveData()' type='button' value='Save & Close'/></center></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Geolocation Code:
// HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: Locations services failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(51.507059, -0.122631),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
However, when I attempt to merge the initialize functions, I get the error 'Cannot read property '_e3' of undefined.' If I keep the functions separate, the program simply ignores the geolocation code. So, I'm stuck, and was hoping someone could give me a hand. Thanks a million!
Note: I have tried everything relevant at https://developers.google.com/maps/, and have checked through all of the very similar questions on this site - this is not a duplicate post. Also, please ignore my use of HTML character codes inside the JavaScript - it's the only way to get HTML (infowindow) inside JavaScript (code) inside HTML (webdata) working.

Related

Google Map - getting error while loading

In my website, when I'm doing the design the google map was worked. After the hosting it shows an error:
Oops! Something went wrong"
I tried to find the solution and found API key is missing. I had created a key with my personal Gmail account and added to footer place like below.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my api key=google-map" type="text/javascript"></script>
But after that also it didn't work. below is my google map script in HTML and js.
//Google Map
var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize_map);
});
<div id="google-map" class="wow fadeIn" data-latitude="13.0938666" data-longitude="80.202357" data-wow-duration="1000ms" data-wow-delay="400ms"></div>

Javascript - Determine if user current location within KML layer of google maps

I am trying to check if user location / Google marker inside the KML layer or not.
Is there any event of KML to determine this?
Or I can check after marker placed on the google map?
Any idea?
My sample code is here.
is there any suggestion or sample code?
Waiting for your kind response.
Thanks in advance.
var map;
function initialize() {
var chicago = new google.maps.LatLng(49.051078, -122.314221);
var mapOptions = {
zoom: 11,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://aeronnovation.ae/NoFlyZoneFile/doc.kml',
preserveViewport: true
});
ctaLayer.setMap(map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'You are here'
});
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 infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
KmlLayer doesn't allow access to the underlying polygon data. You can do it with FusionTables (if you import your KML data) or a third party KML parser (like geoxml3 or geoxml-v3)
example using geoxml3
example using FusionTables
example using geoxml3 with your data through a proxy

Google Maps DomListener Causing Error After Going to Different Page

I am having an issue where the dom listener at the bottom of my google maps function in an external Javascript file is causing a "google is not defined" console error. This happens when I go to a different HTML page on my website that also accesses script in the external file. I believe it is because the DomListener is outside the function however the function does not work if the dom listener is inside the function. Can someone please help me with where to put this DomListener to stop this error occurring? My code is below.
Thankyou very much,
Anthony
function validateEmail() {
var email = form.emailaddress.value;
if (form.firstname.value == "") {
document.getElementById("emailInvalid").style.visibility = "visible";
return false;
} return true;
}
function initialize() {
var myLatlng1 = new google.maps.LatLng(-25.363882,150.044922);
var myLatlng2 = new google.maps.LatLng(-25.363882,152.044922);
var mapOptions = {
zoom: 6,
center: myLatlng1
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString1 = 'Mott Park'
var contentString2 = 'Kilpa Park'
var infowindow = new google.maps.InfoWindow({
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: 'Park'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Water'
});
google.maps.event.addListener(marker1, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString1);//update the content for this marker
infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString2);//update the content for this marker
infowindow.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Here a possible duplicate:
"google is not defined" when using Google Maps V3 in Firefox remotely
I think its might be a placement problem similar to Diego Pino in the thread.

how to keep the position of the map to the KML layer rather than current position of the user?

The below java script basically imports a KML layer file on the map and also displays the current location of the user using geolocation in html 5.
The problem is that it zooms to the current location of the user. I do not want that to happen i still want the focus to be on the KML layer routes rather than the current location of the user.
var map;
function initialize() {
var abby = new google.maps.LatLng(49.051078,-122.314221);
var mapOptions = {
zoom: 11,
center: abby
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url:urllink,
preserveViewport: true
});
ctaLayer.setMap(map);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
// 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 infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
Comment out the line:
map.setCenter(pos);
which set center to the position of user.
Update: And you will have to add infowindow option:
disableAutoPan: true
to disable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.
Remove the {preserveViewport: true} to the KmlLayer.
var ctaLayer = new google.maps.KmlLayer({
url:urllink
});

How do I close an infowindow with Google Maps 3 API?

I've seen the other posts, but they dont have the markers being looped through dynamically like mine. How do I create an event that will close the infowindow when another marker is clicked on using the following code?
$(function(){
var latlng = new google.maps.LatLng(45.522015,-122.683811);
var settings = {
zoom: 10,
center: latlng,
disableDefaultUI:false,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
$.getJSON('api',function(json){
for (var property in json) {
if (json.hasOwnProperty(property)) {
var json_data = json[property];
var the_marker = new google.maps.Marker({
title:json_data.item.headline,
map:map,
clickable:true,
position:new google.maps.LatLng(
parseFloat(json_data.item.geoarray[0].latitude),
parseFloat(json_data.item.geoarray[0].longitude)
)
});
function buildHandler(map, marker, content) {
return function() {
var infowindow = new google.maps.InfoWindow({
content: '<div class="marker"><h1>'+content.headline+'</h1><p>'+content.full_content+'</p></div>'
});
infowindow.open(map, marker);
};
}
new google.maps.event.addListener(the_marker, 'click',buildHandler(map, the_marker, {'headline':json_data.item.headline,'full_content':json_data.item.full_content}));
}
}
});
});
I finally figured it out... no thanks to anyone here... It was actually fairly easy:
First, set up some vars to store the infowindow:
var infowindow;
Then add this to wherever your onClick function is that triggers the other infowindow.open(). Put it above the open though:
if(infowindow) {infowindow.close()}
Inside your loop or however else you are adding markers.
E.g. in full action:
At the very top of my script:
var infowindow;
Inside my loop of adding markers:
function buildHandler(map, marker, content) {
return function() {
if(infowindow) {infowindow.close()}
infowindow = new google.maps.InfoWindow({
content: 'My Content here'
});
infowindow.open(map, marker);
};
}

Categories