Google Map API

Hämta en karta från google maps, centrera den vid önskad position, skapa egna pins och skapa ett fält där man kan lägga till pins. 

• I head-taggen lägg till jquery och google maps js-api:
• För fler funktioner läggs fler & och parametrar till, jag använde:

<script src="//maps.google.com/maps/api/js?sensor=true&libraries=places&language=sv" type="text/javascript"></script>

• För att lägga in kartan (document on load):

var latlng = new google.maps.LatLng(62.63377,15.38086);

 // Creating an object literal containing the properties we want to pass to the map
 var options = {zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
 // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
 
 // Calling the constructor, thereby initializing the map
 map = new google.maps.Map(document.getElementById('map_div'), options);

 // Define Marker properties
 image = new google.maps.MarkerImage('marker.png',
  // This marker is 129 pixels wide by 42 pixels tall.
  new google.maps.Size(129, 41),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 18,42.
  new google.maps.Point(14, 42)
  
  
 );

• För att lägga in en autocomplete som lägger till ställen på kartan (document on load):

var acOptions = {
 types: ['establishment']
 };
 var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
 autocomplete.bindTo('bounds',map);
 var infoWindow = new google.maps.InfoWindow();
 var marker = new google.maps.Marker({
  map: map, icon: image
 });

 google.maps.event.addListener(autocomplete, 'place_changed', function() {
  infoWindow.close();
  var place = autocomplete.getPlace();
  /*if (place.geometry.viewport) {
   map.fitBounds(place.geometry.viewport);
  } else {
   map.setCenter(place.geometry.location);
   map.setZoom(7);
  }
  marker.setPosition(place.geometry.location);
  infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
  infoWindow.open(map, marker);
  google.maps.event.addListener(marker,'click',function(e){

   infoWindow.open(map, marker);

  });*/
  lat=place.geometry.location.lat();
  lng=place.geometry.location.lng();
  school=place.name
  
 });
 
 
});

• För att lägga till en marker på kartan utan att använda formuläret anropa funktionen:

function addMarker(latitude,longitude,place,infotext) {
// Add Marker
 
 var marker = new google.maps.Marker({position: new google.maps.LatLng(latitude,longitude),map: map,icon: image });

 // Add listener for a click on the pin
 google.maps.event.addListener(marker, 'click', function() {
  infowindow1.open(map, marker);
 });

 // Add information window
 var infowindow1 = new google.maps.InfoWindow({
  content:  createInfo(schoolName, ' - '+teacherName)
 });

 // Create information window
 function createInfo(title, content) {
  return '<div class="infowindow"><strong>'+ title +'</strong>'+content+'</div>';
 }
 

}