I am learning the Google Maps API and I am trying to move an object on the map. I created a test page which shows a marker on start, but after calling a function which increases the longitude it removes the marker from the map. There is no error in the console. Can someone look at my code and help me figure out why this is happening?
Javascript file:
var app = angular.module('angularGoogleMapsTestApp', ['uiGmapgoogle-maps']);
var increment = 2.02;
var startingLongitude = -122.44;
var startingLatitude = 37.769;
app.controller('angularGoogleMapCtrl', function ($scope, $log, $rootScope) {
$scope.map = {center: {latitude: 37.7699298, longitude: -122.4469157}, zoom: 12};
$scope.markers = [];
$scope.removeMarkers = function () {
$scope.markers = [];
}
function init() {
$scope.markers.push(
{
id: 0,
latitude: startingLatitude,
longitude: startingLongitude
});
$log.info(JSON.stringify($scope.markers));
}
$scope.moveMarker = function () {
var old = $scope.markers[0].longitude;
$scope.markers.splice(0, 1);
$scope.markers.push(
{
id: 0,
latitude: startingLatitude,
longitude: (old + increment)
});
$log.info(JSON.stringify($scope.markers));
};
init();
});
and html:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ngMap Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/angularjs/angular.js"></script>
<script src="bower_components/lodash/dist/lodash.js"></script>
<script src='bower_components/angular-google-maps/dist/angular- google-maps.js'></script>
<script src="angularGoogleMapsTestApp.js"></script>
<style>
.angular-google-map-container { height: 400px; }
</style>
</head>
<body ng-app="angularGoogleMapsTestApp">
<h3>Angular Google Maps Test</h3>
<p>Test showing adding and removing markers on Angular Google Maps
(from: <a href="http://angular-ui.github.io/angular-google-maps/#!/">
Angular Google Maps</a>)</p>
<div ng-controller="angularGoogleMapCtrl">
<input ng-click="moveMarker()" type="button" value="moveMarker">
<input ng-click="removeMarkers()" type="button" value="Remove markers">
<div style="height:500px">
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-markers models="markers" coords="'self'" modelsbyref="false"/>
</ui-gmap-google-map>
</div>
</div>
</body>
</html>
If you are using Angular Google maps v1.2.0 or higher, your marker objects require an idKey, described here in the docs. You can change your current id key with idKey like so:
$scope.markers.push({
idKey: 0,
latitude: startingLatitude,
longitude: startingLongitude
});
Related
I tried to replicate the following example.
http://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/
I am not able to view the map other than Latitude and Longitude on the browser. Same works when I hit the "Show my location on Map" button on the link above.
Am I missing something in this HTML?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map = null;
function showlocation() {
// One-shot position request.
navigator.geolocation.getCurrentPosition(callback, errorHandler);
}
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('latitude').innerHTML = lat;
document.getElementById('longitude').innerHTML = lon;
var latLong = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: latLong
});
marker.setMap(map);
map.setZoom(8);
map.setCenter(marker.getPosition());
}
google.maps.event.addDomListener(window, 'load', initMap);
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapdiv"),
mapOptions);
}
function errorHandler(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
</script>
</head>
<body>
<center>
<input type="button" value="Show my location on Map"
onclick="javascript:showlocation()" /> <br />
</center>
Latitude: <span id="latitude"></span> <br />
Longitude: <span id="longitude"></span>
<br /><br />
<div>Map</div>
<div id="mapdiv" />
</body>
</html>
After getting my own key on google API and reformatting the code like below, I am able to get it working on IE and Firefox. Still on chrome, its not working.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<center>
<input type="button" value="Show my location on Map"
onclick="javascript:showlocation()" /> <br />
Latitude: <span id="latitude"></span> <br />
Longitude: <span id="longitude"></span>
<br /><br />
</center>
<div id="map"></div>
<script>
var map;
function showlocation() {
// One-shot position request.
navigator.geolocation.getCurrentPosition(callback);
}
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('latitude').innerHTML = lat;
document.getElementById('longitude').innerHTML = lon;
var latLong = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: latLong
});
marker.setMap(map);
map.setZoom(8);
map.setCenter(marker.getPosition());
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_OWN_KEY_GET_FROM_GOOGLE_API_AND_REPLACE_THIS_STRING&callback=initMap"
async defer></script>
</body>
</html>
The code in your post works for me. Most likely:
you aren't serving it from a secure domain (via https://)
you denied geolocation at some point
The geolocation example in the linked blog also only works for me with a secure origin https://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/ (at least in Chrome).
fiddle (works for me on a computer that allows geolocation)
code snippet:
var map = null;
function showlocation() {
// One-shot position request.
navigator.geolocation.getCurrentPosition(callback, errorHandler);
}
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('latitude').innerHTML = lat;
document.getElementById('longitude').innerHTML = lon;
var latLong = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: latLong
});
marker.setMap(map);
map.setZoom(8);
map.setCenter(marker.getPosition());
}
google.maps.event.addDomListener(window, 'load', initMap);
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapdiv"),
mapOptions);
}
function errorHandler(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
html,
body,
#mapdiv {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<center>
<input type="button" value="Show my location on Map" onclick="javascript:showlocation()" />
<br />
</center>
Latitude: <span id="latitude"></span>
<br />Longitude: <span id="longitude"></span>
<br />
<br />
<div>Map</div>
<div id="mapdiv" />
your code looks good, but you need to make sure you are using SSL, or else it will not work (or visually look like it is not working). Since about a month ago, Google has enforced certifying your site with SSL if you wish to use several of their services, including but not limited to the Geo Location.
Communication is now only done through HTTPS. You can see more information from April 2016 here.
I mention this because I am over the past 3 months been migrating about 100 clients to SSL because of this, and even today, there are still way too many that did not listen and now are having different issues like the "Oops! Geolocation function not supported" or the Google API simply not working. But when you look at the Browser Console it mentions the reason.
I'm trying to add google maps in my ionic project. Other than that, I want all the markers in google maps fits all in screen. I don't know where it wrong. My reference here https://developers.google.com/maps/documentation/javascript/reference?csw=1#LatLngBounds
Here is the code
HTML: index.html
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&</script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script
HTML: home.html
<ion-content>
<map on-create="mapCreated(map)"></map>
</ion-content>
JS: directives.js
angular.module('starter.directives', [])
.directive('map', function() {
return {
restrict: 'E',
scope: {
onCreate: '&'
},
link: function ($scope, $element, $attr) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(43.07493, -89.381388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($element[0], mapOptions);
$scope.onCreate({map: map});
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
e.preventDefault();
return false;
});
}
if (document.readyState === "complete") {
initialize();
} else {
google.maps.event.addDomListener(window, 'load', initialize);
}
}
}
});
JS: app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])
JS: controllers.js
$scope.mapCreated = function (map) {
$scope.map = map;
var pos = new Array (new google.maps.LatLng(3.050511,101.687833), new google.maps.LatLng(3.122847,101.676846), new google.maps.LatLng(3.078409,101.608025), new google.maps.LatLng(2.932928,101.642603));
//Create marker
var createMarker = function (pos, icon) {
console.log("create marker");
var marker = new google.maps.Marker({
position: pos,
map: map,
icon: icon,
});
}
var getAllMarkers = function(){
var bounds = new google.maps.LatLngBounds();
for(var i=0; i<pos.length; i++){
bounds.extend(pos[i]);
createMarker(pos[i], 'https://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
$scope.map.fitBounds (bounds);
}
getAllMarkers();
$scope.map.setCenter(pos[0]);
};
Output from the code: Picture 1
This is the output that I want: Picture 2
I suggest to use ngMap or other Angular-module (for example angular-google-map).
Here is an example:
var app = angular.module('myApp', ['ionic', 'ngMap']);
app.controller('MapCtrl', ['$scope', '$http', '$state', 'NgMap', '$timeout',
function($scope, $http, $state, NgMap, $timeout) {
$scope.zoom = 10;
$scope.cx = {
"latitude": 3.050511, "longitude": 101.687833
};
$scope.pos = [{"lat": 3.050511,"lng": 101.687833},
{"lat": 3.122847,"lng": 101.676846},
{"lat": 3.078409,"lng": 101.608025},
{"lat": 2.932928,"lng": 101.642603}
];
NgMap.getMap().then(function(map) {
$scope.map = map;
});
}])
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map" />
<meta name="keywords" content="ng-map,AngularJS,center" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
</head>
<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark">
<h1 class="title">Simple Map in Ionic</h1>
</ion-header-bar>
<ion-content>
<div class="card">
<div class="item item-divider">
NgMap
</div>
<ng-map center="{{cx.latitude}}, {{cx.longitude}}" zoom="{{zoom}}" style="width:100%; height: 100%;">
<marker ng-repeat="p in pos track by $index" position="{{p.lat}}, {{p.lng}}"></marker>
</ng-map>
<pre>cx = {{cx|json}}</pre>
<pre>pos = {{pos|json}}</pre>
</div>
</ion-content>
<ion-footer-bar class="bar-dark">
Footer
</ion-footer-bar>
</body>
</html>
Here is the list of changes that demonstrates how to notify a controller once the map is created.
For directive:
$scope.$emit('onCreate',map);
For controller:
$scope.$on('onCreate', function (event, map) {
$scope.map = map;
//the remaining code goes here...
});
Demo on CodePen
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 hide the map-element initially using ng-if. When the ng-if evaluates to true I cannot add markers to the map. The map-element is contained in a html partial - it is not part of the initial html-page.
HTML:
<div ng-controller="MapCtrl">
<div style="width:100%;height:300px" ng-if="whatever">
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'openMarkerInfo(marker)'}">
</div>
<div id="map_canvas" ui-map="myMap" class="map"
ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
ui-options="mapOptions">
</div>
</div>
<div style="width:100%;height:300px;background:yellow" ng-click="showMap()">
</div>
</div>
JS:
angular.module('doc.ui-map', ['ui.map','ngRoute'])
.controller('MapCtrl', ['$scope','$timeout', function ($scope,$timeout) {
$scope.myMarkers = [];
$scope.mapOptions = {
center: new google.maps.LatLng(35.784, -78.670),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.addMarker = function ($event, $params) {
console.log('addMarker');
$scope.myMarkers.push(new google.maps.Marker({
map: $scope.myMap,
position: $params[0].latLng
}));
};
$scope.setZoomMessage = function (zoom) {
$scope.zoomMessage = 'You just zoomed to ' + zoom + '!';
console.log(zoom, 'zoomed');
};
$scope.openMarkerInfo = function (marker) {
$scope.currentMarker = marker;
$scope.currentMarkerLat = marker.getPosition().lat();
$scope.currentMarkerLng = marker.getPosition().lng();
$scope.myInfoWindow.open($scope.myMap, marker);
};
$scope.showMap = function(){
$scope.whatever = true;
}
$scope.setMarkerPosition = function (marker, lat, lng) {
marker.setPosition(new google.maps.LatLng(lat, lng));
};
}]) ;
The 'ng-if' directive will create or remove a portion of DOM based on expression. The ng-if expression is equal to false when you launch the map app.
So the map-ui element does't append to DOM tree and the 'myMap' property won't be added to the controller scope. This will make addMarker() broken because $scope.myMap === undefined
You could try to add the following code to your addMarker function and it should show undefined on your console:
console.log($scope.myMap);
Although ng-show caused the wrong map width/height problem, you could enforce map refresh by dispatching "resize" event when initialize the map.
You need to trigger a event "resize" on Google map object when you want to refresh the map.
google.maps.event.trigger(map,"resize");
My Example:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular UI Map</title>
</head>
<body>
<div id="map" ng-controller="mapCtrl">
<input type="button" ng-click="showMap()"/>
<div ng-show="isShow">
<div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" ui-event="{'map-click':'addMarker($event, $params)'}" ui-options="mapOptions">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="js/angular-ui-utils/modules/event/event.js"></script>
<script src="js/angular-ui-map/src/map.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>
<script src="js/angularUIMap.js"></script>
<script>
function onGoogleReady(){
angular.bootstrap(document.getElementById("map"),['mapApp']);
}
</script>
</body>
</html>
angularUIMap.js
angular.module("mapApp",['ui.map'])
.controller("mapCtrl",function($scope,$timeout){
var mapInitFlag = false;
$scope.showMap = function(){
$scope.isShow = !$scope.isShow;
if(!mapInitFlag)
{
$timeout(function(){
google.maps.event.trigger($scope.myMap,'resize');
mapInitFlag=true;
console.log('adjust map');
});
}
};
$scope.myMarkers = [];
$scope.mapOptions = {
center: new google.maps.LatLng(35.784, -78.670),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.addMarker = function ($event, $params){
$scope.myMarkers.push(new google.maps.Marker({
map: $scope.myMap,
position: $params[0].latLng
}));
};
});
Screenshot:
Hope this helpful.
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