I am working on site updates for a company that includes adding a new Google Map for a new location.
I need to update the below code with new Longitude and Latitude co-ordinates, but don't know how to generate them based on the address.
<script type="text/javascript">
//<![CDATA[
function gmap_load() {
function createMarker(point, html, labeltext) {
var marker = new GMarker(point, {title:labeltext});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("googlemap"));
map.setCenter(new GLatLng(51.71,-1.96), 11);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
var point = new GLatLng(51.71448,-1.97357);
marker = createMarker(point,
"<div class=smalltext>David Lloyd,<br>Latham Road,<br>Blunsdon,<br>Swindon.<br>SN25 4DL</ div>", "Swindon clinic");
map.addOverlay(marker);
}
}
//]]>
</script>
Found this site that provides you with the data I needed: http://universimmedia.pagesperso-orange.fr/geo/loc.htm
Thanks
Related
I have a page that a user inputs markers on a google map and it saves the center of map latitude and longitude, zoom and the latitude and longitude of the marker into MySQL. Next I'm trying to have a page that displays all the different maps a user has saved with the markers. I have searched and all I can find is how to display multiple markers on the same map or a set number of maps on the same page with a set lat and long.
Could anybody suggest where to start with this or a tutorial on this.
Here is the code I've started with that displays one google map with all the markers that have been entered. Not familiar with javascript, so need pointed in the right direction.
Thanks
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var latitude= <?php echo json_encode($maplat);?>;
var longitude= <?php echo json_encode($maplon); ?>;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(latitude, longitude),
zoom: <?php echo $mapzoom;?>,
mapTypeId: 'satellite'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var date = markers[i].getAttribute("date");
var log = markers[i].getAttribute("log");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latit")),
parseFloat(markers[i].getAttribute("longit")));
var html = "<b>" + date + "</b> <br/>" + log;
var marker = new google.maps.Marker({
map: map,
position: point,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
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'm using google maps api v2 below to show address in var address line on the map, and I want to have this in api v3. Does anyone know how to make this as google maps api v3?
<script type="text/javascript">
//<![CDATA[
var geocoder;
var map;
var address = "425 West 53rd St,New York,NY,";
// On page load, call this function
function load()
{
// Create new map object
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
// Create new geocoding object
geocoder = new GClientGeocoder();
// Retrieve location information, pass it to addToMap()
geocoder.getLocations(address, addToMap);
}
// This function adds the point to the map
function addToMap(response)
{
// Retrieve the object
place = response.Placemark[0];
// Retrieve the latitude and longitude
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
// Center the map on this point
map.setCenter(point, 15);
// Create a marker
marker = new GMarker(point);
// Add the marker to map
map.addOverlay(marker);
} //]]>
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxx" type="text/javascript"></script><div id="map"></div>
Simple example from documentation, with your address instead of the "input field"
var geocoder;
var map;
var address = "425 West 53rd St,New York,NY,";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
codeAddress();
}
function codeAddress() {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
jsfiddle
I have an application that I wrote years ago in Google Map v2 that displayed a map from a given initial lat/long and placed an icon on the map. This webpage was a form with a text box for the lat and long. The page allowed the user to drag the icon to actual location of where a wildfire was located. The new lat/long was placed into the text box and the user could submit the form. I have not found a suitable replacement in v3 for this process. And now I get an error message that a new API key is required from Google Maps. But I also know that in May that v2 may no longer work. So I would like to update this app to v3. Any ideas of where I can find this? Here is an example of the old page http://nfsdata.unl.edu/wildfire/testmap.asp The page is writen in ASP. And we do not have access to PHP on this server. Thanks
That is a very straightforward application.
Your v2 code:
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(41.33,-96.95);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: false});
map.addOverlay(marker);
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else {
map.clearOverlays()
map.addOverlay(new GMarker(point));
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
}
});
}
}
//]]>
</script>
Simple translation to v3 (not tested):
<script type="text/javascript">
//<![CDATA[
function load() {
var center = new google.maps.LatLng(41.33,-96.95);
map = new google.maps.Map(document.getElementById("map"),{
center:center,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position:center
});
google.maps.event.addListener(marker, "click", function() {
marker.setMap(null);
});
google.maps.event.addListener(map, "click", function(evt) {
var point = evt.latLng;
marker.setPosition(point);
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
});
}
}
//]]>
</script>
working example
I'm having trouble getting the MarkerClusterer into my current Google Map (which has taken a long time to get this far!!). How can I combine the two? I'm using V3 of the api.
Here's the MarkerClusterer code:
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
'zoom': 13,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var markers = [];
for (var i = 0; i < 100; i++) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
Update: I've attempted to add the clusterer to my current code but it doesn't seem to work. Places[i] doesn't seem to feed into the clusterer.
The problem was around the geocoding. Solved with A LOT of playing around:
for (var i = 0; i < address.length; i++) {
(function(i) {
geocoder.geocode( {'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
places[i] = results[0].geometry.location;
// Adding the markers
var marker = new google.maps.Marker({position: places[i]});
markers.push(marker);
//add the marker to the markerClusterer
markerCluster.addMarker(marker);
You just need to add each of your markers into an array, then after you've added them all, create the MarkerClusterer object
var markers = [];
// Adding a LatLng object for each city
for (var i = 0; i < marker_data1.length; i++) {
(function(i) {
geocoder.geocode( {'address': marker_data1[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
places[i] = results[0].geometry.location;
// Adding the markers
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: 'Place number ' + i,
});
markers.push(marker);
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
// Check to see if we already have an InfoWindow
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow
infowindow.setContent(marker_data[i]);
// Tying the InfoWindow to the marker
infowindow.open(map, marker);
});
// Extending the bounds object with each LatLng
bounds.extend(places[i]);
// Adjusting the map to new bounding box
map.fitBounds(bounds)
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
})(i);
}
var markerCluster = new MarkerClusterer(map, markers);
OK, here's a working solution. I basically stripped out things until it started to work. I think the problem might lie in the geocoder. Also you have a trailing comma at the end of var marker = new google.maps.Marker({position: places[i], map: map,}); when you create the markers, which will cause problems in IE. You'll notice I'm using coordinates instead of the geocoder (which I have no experience of), but it could be a conflict betweeen geocoder and markerclusterer?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> « Mediwales Mapping</title>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
p { font-family: Helvetica;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
// Creating an object literal containing the properties we want to pass to the map
var options = {
zoom: 10,
center: new google.maps.LatLng(52.40, -3.61),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
// Creating a LatLngBounds object
var bounds = new google.maps.LatLngBounds();
// Creating an array that will contain the addresses
var places = [];
// Creating a variable that will hold the InfoWindow object
var infowindow;
var popup_content = ["<p>DTR Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/dtr-logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/dtr-medical\/\">View profile<\/a>","<p>MediWales<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/index.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/mediwales\/\">View profile<\/a>","<p>Teamworks Design & Marketing<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Teamworks-Design-Logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/teamworks-design-and-marketing\/\">View profile<\/a>","<p>Acuitas Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/acuitas-medical-logo.gif\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/acuitas-medical\/\">View profile<\/a>","<p>Nightingale<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Nightingale.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/nightingale\/\">View profile<\/a>"];
var address = ["17 Clarion Court, Llansamlet, Swansea, SA6 8RF","7 Schooner Way, , Cardiff, CF10 4DZ","65 St Brides Rd, Aberkenfig, Bridgend, CF32 9RA","Kings Road, , Swansea, SA1 8PH","Unit 20 Abenbury Way, Wrexham Industrial Estate, Wrexham, LL13 9UG"];
var geocoder = new google.maps.Geocoder();
var markers = [];
var places = [
new google.maps.LatLng(53.077528,-2.978211),
new google.maps.LatLng(52.83264,-3.906555),
new google.maps.LatLng(51.508742,-3.259048),
new google.maps.LatLng(51.467697,-3.208923),
new google.maps.LatLng(51.628248,-3.923035)
];
// Adding a LatLng object for each city
for (var i = 0; i < address.length; i++) {
//places[i] = results[0].geometry.location;
// Adding the markers
var marker = new google.maps.Marker({position: places[i], map: map, draggable:true});
markers.push(marker);
// Creating the event listener. It now has access to the values of i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
// Check to see if we already have an InfoWindow
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow
infowindow.setContent(popup_content[i]);
// Tying the InfoWindow to the marker
infowindow.open(map, marker);
});
// Extending the bounds object with each LatLng
bounds.extend(places[i]);
// Adjusting the map to new bounding box
map.fitBounds(bounds) ;
}
var markerCluster = new MarkerClusterer(map, markers, {
zoomOnClick: true,
averageCenter: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body class="home page page-id-1873 page-parent page-template page-template-page-php">
<div id="map_canvas"></div>
</body></html>