So Im working on my project and the user is to enter an address after its been created in the database, i want it to show in a google map. I've found out the coordinates for the map through this link :
http://www.codeproject.com/Tips/650139/Finding-Co-ordinates-of-an-Address-in-ASP-NET-Csha
However this link shows the coordinates as a label where as i have a java script method as follows :
<script type="text/javascript">
var myCenter = new google.maps.LatLng(1.303895, 103.831941);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The script works fine if i enter the coordinates myself. I've tried parsing the latitude and longitude through a label and using document.getElementById() method however the map does not show.
Any clue how i can solve this ?
Related
I've included a google map on my webpage with a marker at the location. What I want to add is an existing infoWindow of that location when the page loads.
This is the code i have:
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.257195, 3.716563),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
new google.maps.Marker({
position: new google.maps.LatLng(51.257195, 3.716563),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
screenshot: http://puu.sh/gMtoB/16312f42b7.jpg
Now the "AXA..." is an existing point of interest on google maps, how would i go about that my marker is actually 'linked' to that existing point of interest with the infowindow opened by default.
in short: i would like a marker on that location with the infowindow opened when the webpage loads.
I think the solution would be to first find the place_id and then add your marker using the place ID you found rather than using longitude and latitude.
I created a live demo here:
https://jsfiddle.net/qzo41qzd/
There is also an example in the documentation about placing a marker on the google map using place_id:
https://developers.google.com/maps/documentation/javascript/places#placeid
I am trying to add geo-location to a custom public google map, I can't manage to get it to work. For example here is a custom public google map.
Lets say I wanted to add geo-targeting to that map. I have the following on the site which is directly off the google maps API website:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
as well as the following which I just changed '.getElementsById' to '.getElementsByClassName':
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
mapOptions);
// Try 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: 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);
</script>
Then I call for the map which is in a lightbox:
<h2 class="dis">Where can I<br />get Rumble?</h2>
It displays the map fine, and asks to geo-target but I assume the reason its not working on this map is because its not included in the API.
I was hoping someone had a solution for this.
This is not an API based map. You can display the KML from that map on an API based map
Then use your geolocation code to center the map (depending on the ordering, you might need to use the preserveViewport:true option on the KmlLayer). Relevant code below, see the documenation for more examples and information.
This is in your existing page (leave your version)
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
Add this to display the data from your "custom map":
var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42");
kmlLayer.setMap(map);
I'm trying to emulate this functionality
https://maps.google.com/maps?q=http://en.wikipedia.org/w/index.php%3Ftitle%3DTemplate:Attached_KML/N_postcode_area%26action%3Draw
I want to be able to add and remove a postcode region from an external link / checkbox. I have the KML file loading correctly using this code but I have no idea how to attach the external event listener / handler.
function initialize() {
var london = new google.maps.LatLng(51.522416,-0.11673);
var mapOptions = {
zoom: 11,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'path/to/kml',
suppressInfoWindows: true
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I've tried looking in the ctaLayer object to get the individual nodes from the KML file but they dont seem to be there.
So these Google Maps were working fine and then all of a sudden they weren't. The only change I made was uploading new images for the markers. Upon inspection I can see that the new markers are loading properly and the console produces no errors (Chrome and FF). I have tried flipping the sensor between true and false, also with no luck. When I removed the sensor attrib it kicked back the standard alert error of needing it.
Am I missing something simple?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
</script>
<script type="text/javascript">
var wildbasin = new google.maps.LatLng(30.310716, -97.824238);
var seucampus = new google.maps.LatLng(30.229723, -97.755275);
var austin = new google.maps.LatLng(30.275079, -97.792053);
var basinm = 'http://www.test.stedwards.edu/sites/default/files/wildbasinmarker_1.png';
var campusm = 'http://www.test.stedwards.edu/sites/default/files/maincampusmarker_0.png';
var map;
function initialize() {
var myOptions = {
zoom: 12,
center: austin,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var campus = new google.maps.Marker({
position: seucampus,
map: map,
title:"St.Edward's University",
icon: campusm
});
var thebasin = new google.maps.Marker({
position: wildbasin,
map: map,
title:"Wild Basin",
icon:basinm
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
While the map will default to 100% width, you need to set a height for the containing div. For example, this will solve your issue:
<div id="map_canvas" style="height:400px;"></div>
I'm using this super basic code to add a google maps to my site:
var map;
function initMaps(latIn, longIn, htmltext) {
var LatLng = new google.maps.LatLng(latIn, longIn);
var Options = {
zoom: 13,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapStatic"), Options);
marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
map.enableDragging();
}
google.maps.event.addDomListener(window, "load", initMaps);
The map is displaying fine, but for some reason I can't drag it around, is it possible that some other piece of javascript is doing this?
I look around, but didn't find anything that could cause a problem.