I am trying to use the google maps API to load a map and autocomplete a form. However when I try and initialise I can't do it.
I can do this:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
And the map works. Places API doesn't. I tried adding &libraries=... to the end but that didn't work. If I add:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>
This is my whole page:
<html>
<head>
<link rel="stylesheet "type="text/css" href="control_panel.css">
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqSTkzPn8PpJBY3Pclu-TTjmGDLzqKMD4&libraries=places&callback=initMap">
</script>
</head>
<body>
<div id="headerBar">
<ul class="item">Opening Page</ul>
<ul class="item">Make a booking</ul>
<ul class="item">Heat Map</ul>
<ul class="item">Blah</ul>
<ul class="item">Blah</ul>
</div>
<div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
</div>
<div id="map">
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
</div>
<script type="text/javascript">
// Bias the autocomplete object to the user's geographical location, // [START region_geolocation]
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
}
</script>
</body>
</html>
</script>
</body>
</html>
However the autocomplete form doesn't work
You are not calling the initAutocomplete function. Simplest fix is to call it at the end of initMap.
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
initAutocomplete();
}
proof of concept fiddle
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
initAutocomplete();
}
// Bias the autocomplete object to the user's geographical location, // [START region_geolocation]
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode']
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
<div id="headerBar">
<ul class="item">Opening Page</ul>
<ul class="item">Make a booking</ul>
<ul class="item">Heat Map</ul>
<ul class="item">Blah</ul>
<ul class="item">Blah</ul>
</div>
<div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
</div>
</div>
<div id="map">
Related
I’m having a problem with the implementation of google maps within my phonegap build. I have this problem in the browser on my pc and on the Phone itself. When I have the code in isolation it works and shows a map but when I have it within the rest of the code nothing seem te happen. Please help me with this.
<!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li>Mainpage</li>
<li>Chat met de arts</li>
<li>Consultaanvraag</li>
<li>Doorverwijzing</li>
<li>Bloedonderzoek</li>
<li>Berichten</li>
<li>EPD</li>
<li>Mijn medicijnen</li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
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=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
Terug
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
Check Your API Key.
It's Getting ExpiredKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#expired-key-map-error
Go to -> https://console.cloud.google.com
Select your Project.
And Create New API Key and Try It.
After Add new API key and check your Style
Check Overflow style.
Your Code Works fine Only API Key Is the Problem.
It is working fine if i hard code markers lat long where as when it is built using function, it does not plot. In below code, only two markers are coming up where as it should be 3.
I have tried with complete vue browser script, as a static marker objects it is working fine but not with dynamic markers
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="root">
<gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">
<gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" #closeclick="infoOpened=false">
{{infoContent}}
</gmap-info-window>
<gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :clickable="true" #click="toggleInfo(item, key)" />
</gmap-map>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="vue-google-maps.js"></script>
<script>
var jsondata = {
0: {
full_name: 'Erich Kunze',
lat: '20.31',
lng: '83.89'
},
1: {
full_name: 'Delmer Olson',
lat: '20.32',
lng: '83.89'
}
}
$(function () {
testdata();
;//= testdata();
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw'
},
});
new Vue({
el: '#root',
data: {
startLocation: {
lat: 20.3157,
lng: 83.8854
},
coordinates: jsondata,
<!-- { -->
<!-- 0: { -->
<!-- full_name: 'Erich Kunze', -->
<!-- lat: '20.31', -->
<!-- lng: '83.89' -->
<!-- }, -->
<!-- 1: { -->
<!-- full_name: 'Delmer Olson', -->
<!-- lat: '20.32', -->
<!-- lng: '83.89' -->
<!-- } -->
<!-- }, -->
infoPosition: null,
infoContent: null,
infoOpened: false,
infoCurrentKey: null,
infoOptions: {
pixelOffset: {
width: 0,
height: -35
}
},
},
methods: {
getPosition: function(marker) {
return {
lat: parseFloat(marker.lat),
lng: parseFloat(marker.lng)
}
},
toggleInfo: function(marker, key) {
this.infoPosition = this.getPosition(marker);
this.infoContent = marker.full_name;
if (this.infoCurrentKey == key) {
this.infoOpened = !this.infoOpened;
} else {
this.infoOpened = true;
this.infoCurrentKey = key;
}
}
}
});
});
function testdata(){
alert('chk');
jsondata[2] = {
full_name : 'chk',
lat:20.33,
lng:83.89
}
console.log(jsondata);
}
</script>
</html>
It should plot all the markers two static and one dynamic.
There is no problem with the code, Now the same code is working fine, it shows all the markers.It is working like a charm.
Thanks
Google Map not loading.
only blank div is displaying
here my code snippet
<div id="map-container" class="col-md-9 col-sm-12">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(35.710107,73.039610);
var var_mapoptions = { center: var_location, zoom:17 };
var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});
var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
i think my logic is right. can anyone help me to figure it out what the problem is.
Thnx in advance. . . !
<div class="col-md-9 col-sm-12">
<div id="map-container" style="width: 100%; height:400px;"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(35.710107,73.039610);
var var_mapoptions = { center: var_location, zoom:17 };
var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});
var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
You need to create another div for the map container and add the width & height for this.
First of all, you need an API Key, which you don't seem to have.
then basically just follow the google maps api tutorial, like you seem to have sorta been doing.
<style>
#map {
height: 400px;
width: 400px;
}
</style>
<div id="map"></div>
<script>
var map;
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_API_KEY&callback=initMap" async defer></script>
(https://developers.google.com/maps/documentation/javascript/examples/map-simple)
I want to load 2 google maps using 1 initialize functions on the same page using division class. But the maps are not getting loaded. Can anyone help?
Here is my code:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
mapOptions);
}
</script>
<body>
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" >
<script>
initialize();
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div><!-- /.panel-body -->
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" >
<script>
initialize();
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div><!-- /.panel-body -->
</body>
</html>
Ok there are some mayor problems in you source:
Invalid HTML structure
Your script has to be placed in the head tag above the body tag like:
<head>
<title></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>
<script>
var map;
var map2;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map2 = new google.maps.Map(document.getElementById('map-canvas2'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
You can't initialize the google map by a container class name. All containers had to be unique. As you can see i am creating 2 individual maps 'mapandmap2` and therefore i need two seperate containers in the body tag like:
<div id="map-canvas"></div>
<div id="map-canvas2"></div>
You don't have to call the initialize function in your body tag because it will be called throught the eventListener on window - load
google.maps.event.addDomListener(window, 'load', initialize);
So lets bring it all together:
FIDDLE
getElementsByClassName returns an array of elements
you need to run the initialize function once the document onload event has fired.
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
elems = document.getElementsByClassName('map-canvas');
for (var i = 0; i < elems.length; i++) {
var map = new google.maps.Map(elems[i],
mapOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;">
</div>
<!-- /.panel-body -->
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;">
<script>
initialize();
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div>
<!-- /.panel-body -->
I would like to alter the default display of the direction map to either:
Display a zoomed image of the end-point with the route indicated in blue
Display a zoomed-balloon along with the end-point-marker (http://www.birdwingfx.com/jQuery_gps/demo_gps/gps_demo.html)
I made this basic script which only shows the entire route:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSHoB4rbbeXHf_KfV-pONQvTiSLIJH_G8&sensor=false">
</script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var bilzen = new google.maps.LatLng(50.87228390728491, 5.512539388885443);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var Bilzen = new google.maps.LatLng(50.87228390728491, 5.512539388885443);
var myOptions = {
zoom:11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: bilzen
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.metric
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onload="initialize()">
<form action="#" onsubmit="calcRoute(); return false;" >
<input name="start" id="start" value="start" type="text">
<input name="end" id="end" value="end" type="text">
<input name="Submit" type="submit">
</form>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I have something of a hack here: http://jsfiddle.net/mR2LV/6/ click submit then click on the red car icon to open the Infowindow.
This script assumes the path is only point A to point B (simple). It uses two separate maps, one that goes into the Infowindow "bubble" and the overall map. The idea is to keep two copies of the same information, and use one for the "zoom". The route is in the variable path.
minimap = new google.maps.Map(document.getElementById("minimap"), miniOptions);
if(document.getElementById("minimap")) {
document.getElementById("minimap").style.display= "block";
infomap.setContent(document.getElementById("minimap"));
}
var path = response.routes[0].overview_path;
google.maps.event.addListener(endMarker, 'click', function(event) {
infomap.open(map, this);
google.maps.event.trigger(minimap, 'resize');
minimap.setCenter(path[path.length-1]);
});
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="minimap" style="width: 220px; height:200px; display: none"></div>