I am testing Google Maps API and the code who's coming from the doc not working for me, as the marker is not displayed while I have no problem with the map.
function initMap() {
var place = {lat: 48.1389729, lng: -1.935302};
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 10,
center: place
});
var marker = new google.maps.Marker({
position: place,
map: map,
visible:true,
title: "Hi There",
});
}
The function is created before calling the API with the callback.
What I am missing ?
Add in HTML after you script
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Related
I need to place a Google Map made using Javascript API within an iFrame so that I can perform operations on the map and then submit a form that I create below that takes values from the map, for example, the latitude and longitude. How can I make that happen?
<script>
var map;
var circle=null;
myLatlng = {lat: 28.713956, lng: 77.006653};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 13
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'click', function (event) {
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();
marker.setPosition(event.latLng);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<my-API-key>&callback=initMap"></script>
Also, I need to process the data coming from the map, so I don't want to use Google Maps Embed API. I know it can be placed in an iFrame using it. I have tried doing that but that is not what I need.
I have the following code for my website, basically I want to display 2 google maps with different locations:
function lokacije(){
$output=" <div id='map'></div>
<script>
function initMap() {
var lokacija = {lat: 45.3592940, lng: 14.3495750};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
draggable: false,
scrollwheel: false,
center: lokacija
});
var marker = new google.maps.Marker({
position: lokacija,
map: map,
icon:'http://www.omniaprijevodi.hr/wp
content/uploads/2016/06/map_marker.png'
});
}
</script>
<script async defer src='https://maps.googleapis.com/maps/api/js?
key=AIzaSyAglKEMduJgZf1nN42mHkzeNA4jjpI0JA0&callback=initMap'>
</script>
";
return $output;
}
add_shortcode("lokacije","lokacije");
function lokacije2(){
$output=" <div id='map'></div>
<script>
function initMap() {
var lokacija = {lat: 45.813236, lng: 15.996887};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
draggable: false,
scrollwheel: false,
center: lokacija
});
var marker = new google.maps.Marker({
position: lokacija,
map: map,
icon:'http://www.omniaprijevodi.hr/wp-
content/uploads/2016/06/map_marker.png'
});
}
</script>
<script async defer src='https://maps.googleapis.com/maps/api/js?
key=AIzaSyAglKEMduJgZf1nN42mHkzeNA4jjpI0JA0&callback=initMap'>
</script>
";
return $output;
}
add_shortcode("lokacije2","lokacije2");
I call [lokacije] and [lokacije2] from Wordpress template, but I can't get to display them both, in fact none is displayed. Even if I call [lokacije] twice, I get the map to display only the first time - the second time it doesn't appear. Can someone please help me what I'm doing wrong because I'm having a hard time with this one?
Thank you very much in advance!
First, make sure google api script is loaded before you call the api, and you have to load the script only once. Secondly, your JS code redefines initMap(). Thirdly, you use the same element with ID = map for both maps.
Use wp_enqueue_script() to load the scripts: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
and have something like this for the js:
function initMap(element, lat, lng)
{
var map = new google.maps.Map(element, {
zoom: 16,
draggable: false,
scrollwheel: false,
center: {lat:lat, lng:lng};
});
}
and for the php (assuming you have jquery loaded):
function lokacije1()
{
return sprintf('<div map lat="12.34" lng="56.78"></div>');
}
I'm struggling through the Google maps API to create multiple markers with a link for each. Being a javascript noob doesn't help either.
This is my code so far:
<div id="map"></div>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: -27.469703, lng: 153.025190}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'X';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: -27.449916, lng: 153.044031},
{lat: -27.476536, lng: 153.020148},
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&callback=initMap">
The map displays fine and the markers are there, but everything I've tried to implement the links has been a fail.
Thanks in advance!
You need to add click listeners to each marker. See below:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
marker.linkUrl = 'https://google.com';
marker.addListener('click', function () {
window.location = this.linkUrl;
});
return marker;
});
i have multiple google map instances on my website,now there are two different google map on a same page, what happens is the first one works and other doesn't now i know the logical issue let me show you my code first
<script>
function initMap() {
var myLatLng = {lat: 43.6222102, lng:-79.6694881};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"
async defer></script>
now as i defined a callback method it always initializes the method named initMap whereas what i want to do is there can be multiple google maps lets suppose initMap2 how can i load them without callback method?
To load the map without a callback, load the API synchronously/inline (without the async defer), then call your initMap function on the load event.
(Note: FYI: Google changed all their examples to using asynchronous loading to improve the load times)
(Note2: Google has added a "sample" to their documentation describing synchronous loading)
proof of concept fiddle
code snippet:
function initMap() {
var myLatLng = {
lat: 43.6222102,
lng: -79.6694881
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<!-- added 1/21/2023 to prevent:
Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
-->
<script>
function dummy() {}
window.dummy=dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map"></div>
I am adding a google map to my site, and i've added exactly the same code as from the google maps api documentation but my map appears as a static map without marker (with the correct center point which is a good start) instead of a dynamic draggable map with marker and controllers.
Any ideas what I'm doing wrong? Code is below although I'm fairly sure the code is fine since it's straight from the google maps api site.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);