Google Maps JavaScript API V3 Examples
Google Maps JavaScript API V3 ExamplesFinnbarr P.
Murphy([email protected]) This post contains a number of examples
which use the Google Maps JavaScript V3 APIs. I am going assume
that you are quite comfortable with JavaScript programming in
general and are somewhat familiar with at least Version 2 of the
Google Maps JavaScript APIs.
Example 1
This is a very simple example which uses Geocoder to determine
the latitude and longitude of a given address string and
StreetViewPanorama to display that location in Street View.
Example 1 - Google Map JavaScript v3 APIs #map { width: 800px;
height: 600px; float: left; } function init() { var userLocation =
'Ocean Street, Swampscott, MA 01907'; var userPOV = { heading:120,
pitch:0, zoom:1}; var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': userLocation}, function(results,
status) { if (status == google.maps.GeocoderStatus.OK) { // var
latLng = results[0].geometry.location; new
google.maps.StreetViewPanorama(document.getElementById("map"), {
position: results[0].geometry.location, pov: user POV, visible:true
});
Fo r
03-04-2011
pe rs o
Copyright 2004-2011 Finnbarr P. Murphy. All rights reserved.
nn a
If you would like an online introductory tutorial to the version
3 APIs, a good one can be found here. A good book on the subject to
add to your technical library is Beginning Google Maps API 3 by
Gabriel Svennerberg.
lu
There are many significant differences between version 2 and
version 3. One of the major changes is that all the G* namespaces
were changed to google.maps.*. For example, Gmarker is now
google.maps.Marker. Unfortunately, there is no mechanical way to
convert code which uses version 2 APIs to use version 3 APIs; the
changes are so significant and profuse that manual recoding is
required.
se
on
In May 2010, version 2 of the Google Maps API was deprecated in
favour of version 3. At the same time Street View support, based on
HTML rather than on Flash as in version 2, was added to version 3.
The version 2 APIs will be supported for at least three years but
no new features will be added.
ly
1/9
Google Maps JavaScript API V3 Examples } else { alert("Geocode
failed. Reason: " + status); } }); }
google.maps.event.addDomListener(window, 'load', init);
This is what you should see:
Example 2
Fo r
In version 2 of the Google Maps JavaScript APIs there was an
easy way to highlight which streets were available in Street View
using addOverlay, i.e.
function toggleOverlay() { if (!overlayInstance) {
overlayInstance = new GStreetviewOverlay();
map.addOverlay(overlayInstance); } else {
map.removeOverlay(overlayInstance); overlayInstance = null; } }
This method of highlighting streets in not available in version
3. In fact, a lot more code is required to achieve the same
functionality. The following example shows how to highlight streets
with both Street View support and/or Traffic support.
03-04-2011
pe rs o
Copyright 2004-2011 Finnbarr P. Murphy. All rights reserved.
nn a
lu
se2/9
on
ly
Google Maps JavaScript API V3 Examples Example 2 - Google Map
JavaScript v2 APIs #map { width: 800px; height: 600px; } .hilight {
font-weight: bold; } .hilight, .lolight { background-color: white;
height: 18px; border-style: solid; border-color: black;
border-width: 2px 1px 1px 2px; padding-bottom: 2px; font-family:
arial, sans-serif; font-size: 12px; } < /script> var map;
function init() { var options = { scrollwheel: false, scaleControl:
false, backgroundColor: "black", navigationControlOptions: {
position: google.maps.ControlPosition.RIGHT, style:
google.maps.NavigationControlStyle.DEFAULT },
mapTypeControlOptions: { style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU }, } map = new
google.maps.Map(document.getElementById("map"), options);
map.setCenter(new google.maps.LatLng(42.467176,-70.921774));
map.setZoom(12); map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
// streetview tiles var street = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) { var X = coord.x % (1
![RooWay: A Web-Based Application for UA Campus Directions · Google Maps JavaScript API v3 [2]. In this paper, we present a Web-based application for UA campus directions named RooWay](https://img.pdfslide.us/doc/110x75/5fc2bf6f884cff4fb641c2ac/rooway-a-web-based-application-for-ua-campus-directions-google-maps-javascript.jpg)
