Google maps javascript #1

Create a new map at a specific coordinate:

center:new google.maps.LatLng(51.508742,-0.120850),

Set a text, stating the latitude and longitude of a location:

content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()}

Set the fill color attribute of object:

fillColor:"#0000FF"

Set the fill opacity attribute of object:

fillOpacity:0.4

Displays the "default" behavior (depends on screen size):

google.maps.MapTypeControlStyle.DEFAULT

Select map type via a dropdown menu:

google.maps.MapTypeControlStyle.DROPDOWN_MENU

Display one button for each map type:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR

Picks the best zoom control based on device and map size:

google.maps.ZoomControlStyle.DEFAULT

Displays the standard zoom slider control:

google.maps.ZoomControlStyle.LARGE

Displays a mini-zoom control (only + and - buttons):

google.maps.ZoomControlStyle.SMALL

Zoom to 9 when clicking on marker:

google.maps.event.addListener(marker,'click',function() {map.setZoom(9);map.setCenter(marker.getPosition());});

Open an infoWindow:

infowindow.open(map,marker);

Calling the map's setMapTypeId() method:

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

Set the tilt in a google map:

map.setTilt(0);

Allow map type control:

mapTypeControl: true

mapTypeControlOptions is an attribute that creates an object:

mapTypeControlOptions: {}

Set the map in HYBRID (photographic map + roads and city names):

mapTypeId:google.maps.MapTypeId.HYBRID

Use the setMap() method:

marker.setMap(map);

HTMLElement Specifies in what HTML element to put the map:

new google.maps.Map(HTMLElement,MapOptions)

Allow the control of overview map:

overviewMapControl: true

Allow pan control:

panControl: true

Set the path attribute of an object (Path = myTrip):

path:myTrip

Place a marker on a map, after an event:

placeMarker(map, event.latLng);

You can also position a control, with the ControlPosition property:

position: google.maps.ControlPosition.TOP_CENTER

Allow the rotation of the map control:

rotateControl: true

Allow scale control:

scaleControl: true

Allow street view control:

streetViewControl: true

Set the stroke color attribute of object:

strokeColor:"#0000FF"

Set the stroke opacity attribute of object:

strokeOpacity:0.8

Set the stroke weight attribute of object:

strokeWeight:2

A Polyline is a line that is drawn through a series of coordinates in an ordered sequence:

var flightPath = new google.maps.Polyline({});

Show an InfoWindow with some text content for a marker:

var infowindow = new google.maps.InfoWindow({content:"Hello World!"});

Create a new map within a canvas with the mapOptions object:

var map = new google.maps.Map(mapCanvas, mapOptions);

Defines four maps with different map types:

var map1-4 = new google.maps.Map(document.getElementById("googleMap1-4"), mapOptions1-4);

Creates a new map inside the <div> element with id="googleMap", using the parameters that are passed (mapProp):

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

Create an object regarding map options:

var mapOptions = {};

Disable default GUI in map options:

var mapOptions {disableDefaultUI: true}

Set a map prop, at the center of a coordinate, and zoom in 5:

var mapProp= {center:new google.maps.LatLng(51.508742,-0.120850), zoom:5};

Add the marker to the map:

var marker = new google.maps.Marker({position: myCenter});

How to animate the marker with the animation property:

var marker = new google.maps.Marker({position:myCenter,animation:google.maps.Animation.BOUNCE,icon:'pinkball.png'});

Create a new google maps marker:

var marker = new google.maps.Marker({})

Create a radius around an area:

var myCity = new google.maps.Circle({center:amsterdam,radius:20000});

Set the locations of a trip (3):

var myTrip = [stavanger,amsterdam,london];

Set the variable position to the current zoom:

var pos = map.getZoom();

Allow zoom control:

zoomControl: true

Allow zoom control options:

zoomControlOptions: {}

A MapOptions object that holds the map initialization variables/options:

MapOptions

Call the script to allow google maps to run:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>