Need your help. I have the error on my WordPress site. Google Maps shows this errors:
Jb {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Jb (https://maps.googleapis.com/m…xALxizYJSGZA470&callback=initMap&ver=4.9.5:157:51"}
And this
Uncaught TypeError: Cannot read property 'firstChild' of null
In my code.js I have this code:
(function ($) {
...
function initMap(officeLocation, pathMap) {
var map = new google.maps.Map(document.getElementById(pathMap), {
zoom: 15,
center: officeLocation
});
var marker = new google.maps.Marker({
position: officeLocation,
map: map
});
}
showOnKyivMap.on('click', function() {
mapCover.fadeIn(500);
initMap(kyivOffice, mapFooter);
});
$(document).ready(function() {
initMap(kyivOffice, mapKyivContacts);
});
})(jQuery);
Google Map script is connected in functions.php
wp_enqueue_script( 'google-maps', "https://maps.googleapis.com/maps/api/js?key=AIzaSyAN-c6nn0xMNJB_2SfGxALxizYJSGZA470&callback=initMap", array("code-js"), '', true);
So what do I do wrong?
Instead of using function to create google map, you can use <iframe> for showing google map. For using <iframe> properly use you can visit to below link:
https://en.support.wordpress.com/google-maps/
Related
I just wondered if anyone knew of a simple script available that will do the following:
Show Google map location of a particular vendor by getting its name from URL. Like we see in various listing websites like Justdial, IndiaMart, Zomato and a lot more. More clearly if my URL is
www.example.com/list.php?city=Delhi
It will show Delhi on google map embed on my list.php web page.
Does anyone know if something like this already exists in PHP?
Thanks in advance.
This will help you.
Html Part.
<div id="map" style="width:100%; height:500px;"></div>
Javascript:
function initMap() {
var latitude = your latitude;
var longitude = Your longitude;
var myLatlng = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
});
var address = Address;
var infowindow = new google.maps.InfoWindow({
content: address
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
}
And finally you have to include map library.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=Google key&callback=initMap">
</script>
I have a code of generate map image using Google map api display below :
<img src="https://maps.googleapis.com/maps/api/staticmap?center='<?php echo $madd; ?>'&zoom=7&size=700x300&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon%26chld=medical%7Clabel:'<?php echo $mlabel; ?>'"/>
Using above code display here google red marker icon but I want to display custom marker icon.
Please help me.
You can try this one i think this one being helpful to you
http://maps.google.com/maps/api/staticmap?center=21.19365498864821,72.8217601776123&size=200x200&zoom=12&maptype=roadmap&markers=icon:%20http://ijiya.com/images/marker-images/image.png|shadow:true|21.19365498864821,72.8217601776123&sensor=false&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC365hfg5yrjskd999
You can simply achieve it using java-script
var image = '../images/pin.png';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'YOUR MARKER TITLE',
icon:image
});
where image is your custom marker PNG image,
So your Java-Script code should look like this
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(30.085100, 31.328230),
zoom: 16,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
var div = document.getElementById('surabaya');
var map = new google.maps.Map(div, options);
var myLatLng = { lat: 30.085100, lng: 31.328230 };
var image = '../structure/static/pin.png';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'PMAS',
icon:image
});
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
};
You can simply use this PHP script. It is free and has lots of features. With it, you can manage your maps without even one line coding.
I'm getting an issue when I try to load this code, and I can't figure why it doesn't work...
<script type="text/javascript">
$(document).ready(function()
{
var geocoder = new google.maps.Geocoder();
$(".textarea-autosize").autosize();
geocoder.geocode({
address: '{$order->address_delivery["address1"]},{$order->address_delivery["postecode"]},{$order->address_delivery["city"]}'
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK)
{
var delivery_map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: results[0].geometry.location
});
var delivery_marker = new google.maps.Marker({
map: delivery_map,
position: results[0].geometry.location,
url: 'http://maps.google.com?q={$order->address_delivery["address1"]},{$order->address_delivery["postcode"]},{$order->address_delivery["city"]}'
});
google.maps.event.addListener(delivery_marker, 'click', function() {
window.open(delivery_marker.url);
});
}
});
});
// Fix wrong maps center when map is hidden
$('#tabAddresses').click(function(){
x = delivery_map.getZoom();
c = delivery_map.getCenter();
google.maps.event.trigger(delivery_map, 'resize');
delivery_map.setZoom(x);
delivery_map.setCenter(c);
});
</script>
The error occurrs on the var geocoder = new google.maps.Geocoder();
Then I tried to load the following script : <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
and I get another error :
'Uncaught TypeError: Cannot read property 'offsetWidth' of null'
Does anyone has any idea of why it doesn't work ?
Google maps aren't loaded at the time when you're trying to call it. You should be using this:
HTML:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap" async defer></script>
JS:
function initMap() {
// Google maps are now initialized.
}
You need to include the async and defer attributes into your script - this will make sure that the rest of the website keep loading instead of waiting for the script to load (which is handy, because it's quite big).
Secondly, you pass the "callback" parameter when calling the script. This is the name of the function that should be executed when the script is loaded. This way you can make sure you only initialize the map when it's actually loaded and present within your window.
Simply add this script to your html file:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
If you want to test the google geocoding api or check out some code, check out this link. Google Geocoding Service API Source
Here is my function I created for gmaps
function createMap (qc,mess,ele){
var myLatLng = qc;
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById(ele), {
center: myLatLng,
scrollwheel: false,
zoom: 4
});
// Create a marker and set its position.
var marker = new google.maps.Marker({
map: map,
position: myLatLng,
title: mess
});
}
Here is what my PHP generates from my Database
<div id="1_map"></div>
<script>
var qc_1 = {lat:44.6309454, lng:-123.0913114};
createMap(qc_1,"text Message", "#1_map");
</script>
Order of load is Google Maps API Call, javascript file with createMap, and then PHP generated Text.
Uncaught TypeError: Cannot read property 'offsetWidth' of null
document.getElementById(ele) doesn't need the hash symbol, I don't think.
try
createMap(qc_1,"text Message", "1_map");
not
createMap(qc_1,"text Message", "#1_map");
Im trying to embed a map sing google maps api v3 in my nyromodal box but it doesnt happen.
I've tested the code without the modal and it works but when i try to open it on the nyromodal nothing appears.
How can i do it?
Ive just figured out how to do it!
1 - Insert the js code for google in your index page with 'rel="forceload"' and 'rev="shown"' as the following:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false" rel="forceload" rev="shown"></script>
2 - You insert the code that generates the map inside the modal page as the following:
<script>
$(document).ready({
var mylatlng = new google.maps.LatLng(latitude, longitude);
var mapProp = {
center: mylatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("briefmap"), mapProp);
var marker = new google.maps.Marker({
position: mylatlng
});
});
</script>