Calling multiple google maps with API key call from wordpress template - javascript

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>');
}

Related

Google Map API - Marker not displayed

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>

Google Maps Api shows grey map

I'm trying to integrate Google Maps Javascript API in my wordpress website.
I created an API key, and I added a pure html code block in my page.
Before it worked perfectly, but now it only show a grey piece. When I zoom out and drag the map around, the following picture is visible:
This is my code in the html block:
<div id="googlemaps"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script>
And YES, I replaced YOUR-API-KEY with my API key in my code (this is just so others won't use the generated code).
I don't know what is wrong with the map. I do not have errors in my webconsole.
Thanks in advance!
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8,
backgroundColor: '#fffff',
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script
<div id="googlemaps"></div>
Use backgroundColor property
Call google.maps.event.trigger(map, 'resize') inside initMap() as you have resized the map div.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
google.maps.event.trigger(map, 'resize')
}

Using Google maps api inside div not working

I've been trying to add google maps to my page with no avail. My code works fine independently but when I add to a real webpage the map doesn't show at all.
<div id="map" style="width:100%;height:500px"></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=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap"
async defer></script>
And the page looks like this
As you can see, the div pops up but not the map. How would I get this to show?
Your myMap function has never been called. You can call it like,
function myMap() {
...
}
myMap();
or use callback parameter on the script..
<script async defer src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"> </script>
Edit
You're calling it wrong, it should be an &, not & in your script parameter. Try to change your code to,
<div id="map" style="width:500px;height:500px"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=myMap"> </script>
For more detail, check out this fiddle.
- Edit 2 -
I have no idea why you can't get it to work in your site. Since I could do it just fine.
Below are the script that I inject during runtime on the console in your site.
$('.content--body__wrapper').append('<div id="map" />')
$('#map').attr('style', 'width:500px; height:500px')
$('.content--body__wrapper').append(`<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>`);
$('.content--body__wrapper').append(`<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap" async defer></script>`);
What I can tell from your screenshot is your initMap function does not get called. And I am not sure if it's the callback from google map since it provides no error in your console.
Below is an alternative approach, that you might want to try. Try to call initMap on the js instead of callback.
<div id="map" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI"></script>
<script>
$(function() {
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
initMap();
});
</script>

Javascript - Google Maps Simple Map not rendering tiles on Webserver - works local tho

I tried embedding Google Maps javascript API to my website. Tried it local and it worked fine but as soon as i try it on my webserver the tiles wont load.
Heres the simple code im using:
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>
Here is how it looks like on the website
Image
even the marker is showing up.
thanks in advance
You have extra spaces in url - js?key. Check my snippet. I update this line "https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap" only
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>

Populating google map with markers JSON

I am trying to populate a google map with markers. The information for each marker is contained in this array:
[{"id":"1","name":"toler","lng":"110.33929824829102","lat":"-7.779369982234709","created_at":"2014-02-21 16:19:28","updated_at":"2014-02-21 16:19:28"},{"id":"2","name":"hallo :)","lng":"110.36865234375","lat":"-7.797738383377609","created_at":"2014-02-21 16:19:49","updated_at":"2014-02-21 16:19:49"}]
However, my map does not show the markers. I am using this code in my javascript:
getLocations();
function getLocations() {
alert('hello');
$.ajax({
type: "GET",
url: "http://localhost:8888/public/test",
dataType: "jsonp",
success: function(json){
$.each(json, function(i, entry){
PlotMarker(json[i].lat, json[i].long);
});
},
error: function(err){
console.log(err);
}
});
}
function PlotMarker(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
markerLocations.push(marker);
}
Is there any way to fix this issue? Calling this url
http://localhost:8888/public/test
returns the JSON shown above.
Any help would be greatly appreciated.
Thanks.
EDIT:
function initialize() {
var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
Declare your map variable outside of the initialize function. It's the only way that other functions will be able to see it:
var map;
function initialize() {
var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
Try changing:
PlotMarker(entry.location.lat, entry.location.lng);
to:
PlotMarker(entry.lat, entry.lng);
Try changing this:
PlotMarker(entry.location.lat, entry.location.lng);
To:
PlotMarker(json[i].lat, json[i].lng);
I think it's because of the outer []'s.
The main problem is that getLocations() is called before initialize() is started. You have to comment out getLocations(); and move it to the end of initialize() function.
That is not enough: map definition has to be moved outside of initialize() function and should not be redefined inside initialize() function.
markerLocations, used in PlotMarker(), is not defined. Should be defined as global like map
var map;
var markerLocations = [];
function initialize() {
...
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
...
getLocations();
}
PlotMarker() has to be called like:
PlotMarker(entry.lat, entry.lng);
Are you ever calling your initialize function? Call it right when the page loads.
google.maps.addDomListener(window, 'load', initialize);
as shown here.
What is the sequence of those functions? Which do you call first, and next?
I have encountered this kind of problem and what happens is, the map has not finished loading all the tiles so the markers could not be placed on those and so they do not appear. But when you check in the console, the marker objects are there.
This is how I solved it:
google.maps.event.addListener(map, 'tilesloaded', function() {
plotMarkers();
google.maps.event.clearListeners(map, 'tilesloaded');
});
It assures the map tiles are completely loaded before plotting the markers. In this case, the markers will surely be visible.

Categories