I have a PHP-variable called $go_Adress which contains the adress I need to get a map and a street view from. How do I do that? I have created an api-key but else I don't know how to do it!
Hope you can help.
I have just answered another question on Google Maps, and I think I can use the same example here.
The following example may help you getting started. All you would need to do is to change the JavaScript variable userLocation with the address you have in your php variable.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var userLocation = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLocation, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
map.addOverlay(new GMarker(bounds.getCenter()));
}
});
}
</script>
</body>
</html>
The above example would render a map like the one below:
You would probably need to replace the static:
var userLocation = 'London, UK';
... with:
var userLocation = '<?php echo $go_Adress; ?>';
... as Fletcher suggested in another answer.
Note that the map will not show if the Google Client-side Geocoder cannot retreive the coordinates from the address. You may want to see how to handle this situation.
As for the API Key, you need to add it as a parameter to the <script> src that is calling the Maps API, as shown in the The "Hello, World" of Google Maps.
UPDATE:
I am updating the above example to use the Street View Panorama object. I hope that the example is self-explanatory, and that it gets you going in the right direction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo - Street View</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var userLocation = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLocation, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
new GStreetviewPanorama(document.getElementById("map_canvas"),
{ latlng: bounds.getCenter() });
}
});
}
</script>
</body>
</html>
Screenshot from the above example:
2nd UPDATE:
You can enable both the street view and the map canvas, by "merging" the two examples above, as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo - Street View with Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="pano" style="width: 400px; height: 200px"></div>
<div id="map_canvas" style="width: 400px; height: 200px"></div>
<script type="text/javascript">
var userLocation = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLocation, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
map.addOverlay(new GMarker(bounds.getCenter()));
new GStreetviewPanorama(document.getElementById("pano"),
{ latlng: bounds.getCenter() })
}
});
}
</script>
</body>
</html>
Screenshot for street view with map:
3rd UPDATE:
The Google Maps API does not have a direct method to link the movements of the street view with the map. Therefore this has to be handled manually. The following example makes the red marker draggable, and when dropped it moves the street view accordingly. In addition, each time the street view is updated, the marker is updated on the map as well.
To try this example, make sure that you insert the API Key in the <script> src parameters, and that you try it from the domain where you registered the key. Otherwise, it looks like the events do not work properly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo - Street View with Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="pano" style="width: 400px; height: 200px"></div>
<div id="map_canvas" style="width: 400px; height: 200px"></div>
<script type="text/javascript">
var userLocation = 'Copenhagen, Denmark';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLocation, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), 14);
map.addOverlay(new GStreetviewOverlay());
var marker = new GMarker(bounds.getCenter(), { draggable: true });
map.addOverlay(marker);
var streetView = new GStreetviewPanorama(document.getElementById("pano"));
streetView.setLocationAndPOV(bounds.getCenter());
GEvent.addListener(marker, "dragend", function(latlng) {
streetView.setLocationAndPOV(latlng);
});
GEvent.addListener(streetView, "initialized", function(location) {
marker.setLatLng(location.latlng);
map.panTo(location.latlng);
});
}
});
}
</script>
</body>
</html>
Screenshot of the above example:
Getting the street view working nicely with the map could be the topic of another Stack Overflow question, as there are quite a few considerations to make.
You will need to include a javascript file which uses the GClientGeocoder object as in this example:
http://code.google.com/apis/maps/documentation/services.html#Geocoding_Object
The javascript will need to be passed through a PHP interpreter which injects the address into a javascript variable.
So, for the above example
var myAddress = '<?php echo $go_Adress; ?>';
showAddress(myAddress);
But first I recommend getting a very basic map shown.
http://code.google.com/apis/maps/documentation/introduction.html
Related
About 3 weeks ago the arcgis Dynamic service is no longer visible on the google map. At the beginning I thought that something went wrong with my code, but after executing a sample code that does the same with the same result, I realized that something else went wrong.
The following code was taken from "ArcGIS Server Link for Google Maps API V3: Examples". It is basically loading an ESRI sample dynamic service.
When I load a Dynamic service from my arcgis server, the service is loaded but its not visible on the google map. (I know that because when I click on the map I get the property window of the feature from the Dynamic service although it is not visible).
If you run the following code you will not be able to see the esri dynamic service:
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer][1]'.
My question is what went wrong here?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Dynamic Map Service Overlay</title>
<script type="text/javascript">
//copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
function getURLParam(name) {
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
return (results === null ? "" : decodeURIComponent(results[1]));
}
var gmaps_v = getURLParam('v');
if (gmaps_v) gmaps_v = '&v='+gmaps_v;
var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
document.write(script);
</script>
<script type="text/javascript" src="../src/arcgislink.js">
</script>
<script type="text/javascript" src="dynamap.js">
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width:100%; height:100%">
</div>
</body>
//dynamap.js
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(40, -100),//35.23, -80.84),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true //my favorite feature in V3!
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS/
rest/services/Demographics/ESRI_C
ensus_USA/MapServer';
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS
/rest/services/Demographics/ESRI_Census_USA/MapServer';
var dynamap = new gmaps.ags.MapOverlay(url);
dynamap.setMap(map);
}
window.onload = init;
my goal is to be able to load markers from an sql database and display them on a googlemap. but im having a hard time just trying to read markers from an xml file.
Here is my HTML file
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize()
{
var mapOptions =
{
zoom: 12,
center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadXMLFile(){
var filename = 'markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});
function onXMLLoadFailed(){
alert("An Error has occurred.");
}
function parseXML(xml){
container = new nokia.maps.map.Container();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var nme = $(this).find('name').text();
var address = $(this).find('address').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new nokia.maps.geo.Coordinate
(parseFloat(lat), parseFloat(lng));
container.objects.add(new nokia.maps.map.StandardMarker(
markerCoords, {text:nme}));
});
map.objects.add(container);
map.zoomTo(container.getBoundingBox(), false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
and this is my xml file
<?xml version="1.0"?>
<markers>
<marker>
<name>M1</name>
<address>Abbey Street</address>
<lat>53.3496</lat>
<lng>-6.257</lng>
</marker>
</markers>
The map is rendering but no marker is appearing on the map. I have google searched this problem but cant find anything that helps.
you are not calling loadXMLFile()
you aren't including the jquery library
you aren't creating google.maps.Markers (looks like you have syntax from some nokia API instead).
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var map = null;
function initialize()
{
var mapOptions =
{
zoom: 12,
center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
loadXMLFile();
}
function loadXMLFile(){
var filename = 'v3_SO_20140124_markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});
function onXMLLoadFailed(){
alert("An Error has occurred.");
}
function parseXML(xml){
var bounds = new google.maps.LatLngBounds();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var nme = $(this).find('name').text();
var address = $(this).find('address').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new google.maps.LatLng(parseFloat(lat),
parseFloat(lng));
bounds.extend(markerCoords);
var marker = new google.maps.Marker({position: markerCoords, map:map});
});
map.fitBounds(bounds);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
working example
I'm trying to prototype some plotting on Google Maps API. I've followed the code here and think my code should work, however I get a blank screen. All of the objects have what appears to be the correct data but alas no dice. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Test</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key removed>&sensor=false"></script>
<style type="text/css">
</style>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(33.001466, -97.354317);
var mapOptions = {
zoom:6,
center:myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
console.log(mapOptions);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
console.log(map);
var routeCoordinates = [
new google.maps.LatLng(33.001466, -97.354317),
new google.maps.LatLng(33.025001, -97.352171),
new google.maps.LatLng(33.033219, -97.341700),
new google.maps.LatLng(33.049321, -97.320414),
new google.maps.LatLng(33.051335, -97.304020),
new google.maps.LatLng(33.059464, -97.298355),
new google.maps.LatLng(33.083919, -97.295609),
new google.maps.LatLng(33.111314, -97.291918),
new google.maps.LatLng(33.136042, -97.289257),
new google.maps.LatLng(33.182818, -97.287111)
];
console.log(routeCoordinates);
var routePath = new google.maps.Polyline({
path:routeCoordinates,
strokeColor:"#000000",
strokeOpacity:.90,
strokeWeight: 2,
editable:false
});
console.log(routePath);
routePath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas">
</div>
</body>
</html>
You map works for me if I remove the key and give the map div a size.
http://www.geocodezip.com/JohnSwaringenSO.html
I have a simple Google Map that fill the whole page.
Here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var map;
function initialize() {
var mapOptions = {
zoom: 0,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
google.maps.event.addListener(map, 'idle', function() {
var b = map.getBounds();
document.getElementById("bounds").innerText = b.getSouthWest().lng() + ", " + b.getNorthEast().lng();
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;">map div</div>
<div id="bounds" style="left: 100px; top: 0px; width: 300px; height: 30px; position: absolute; background-color: #a0a0a0;"></div>
</body>
</html>
At MINIMUM zoom level, when you can see several world maps, I expect longitude bounds to be -180 - 180, but in real I don't get it. Is my expectation wrong and why?
In real application I have a server-side code that fetches markers from database depending on current map bounds.
The bounds will report the lat and lng at the bounds of the window - even if the map has wrapped a few times. So what ever the lat,lng of the bottom right of your window will be one point, and the upper left will be the other.
I had this same issue and what I ended up doing was creating a World bounds that was 90, 180 to -90, -180 and then seeing if that fit in the window.
var ne = new google.maps.LatLng(90, 180);
var sw = new google.maps.LatLng(-90, -180)
var world = new google.maps.LatLngBounds(ne, sw);
var fetchbounds;
if(map.getBounds().contains(ne) && map.getBounds().contains(sw)){
fetchBounds = world;
}else{
fetchBounds = map.getBounds();
}
I have some data about place,road, city.
And I want to search the map by entering these values.
Now I have script that generate latitude and longitude using geocoding.
But I wonder if there is a way to generate google map code (iframe) by geocoding?
Could you please tell me the way or give me some links?
The following example may help you getting started. All you would need to do is to change the JavaScript variable userLocation with the place, road and city chosen by your users:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var userLocation = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLocation, function (locations) {
if (locations.Placemark) {
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
map.addOverlay(new GMarker(bounds.getCenter()));
}
});
}
</script>
</body>
</html>