I'm using this example code to put a google map in a wordpress page:
<div id="map" style="height:300px; width:300px;"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
I filled my api_key properly.
So, maps loads, but some problems happens like image shows:
Zoom buttons and street view "doll" change to strange appearance.
All map is loaded, but if I drag for right, new area appears nothing
(brown opaque). If I drag to left, all appears normal. If I change zoom in opaque area, it does get back to normal, but right side problem continue.
I think problem is with wordpress, because I made same test in my local computer in a simple html page and all works.
Thank you!!
Related
I am very new to Google MAPs API. I am trying to create a map for my business with that replicates the below picture. I have the code below as well where I have the lat and long coordinates, and a marker initiated based on those cordinates. How can i show something similar like this with javascript, where on page load
A label as below shows the name of the business and address, with also a clickable link (an arrow for directions, not shown in picture)
Custom html showing business name next to marker on maps
?
<div id="map"></div>
<script>
function initMap() {
// The location of UluruBBS
var uluru = { lat: 33.931, lng: -84.337732 };
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), { zoom: 15, center: uluru });
// The marker, positioned at Uluru
var marker = new google.maps.Marker({ position: uluru, map: map });
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[mykey]&callback=initMap">
</script>
Found another alternative via google maps api docs - by using Google Maps Embedded API. Please refer to the doc for more information.
I am using Google Map Javascript API with marker clustering and InfoBox on a Laravel Website
https://developers.google.com/maps/documentation/javascript/marker-clustering
The native red marker shows properly on desktop but doesnt appear on mobile.
However if i click at the location where it should be, my infobox does appear and everything else if ok.
Is there a special setting to be taken into account (as maybe the png used for this marker on mobile display or else?)
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({position: uluru, map: map,icon: image});
}
</script>
<!--Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
After checking, it was not related to Google Map but to my server .env environment file (I am using Laravel)
APP_URL variable was refering to 'localhost' in .env file and this APP_URL variable was used in Javascript code (using PHP-Vars-To-Js-Transformer) for retrieving some server img ressources:
This caused on desktop the ressources to be properly loaded on google map api but not on mobile.
Replacing localhost by my website url in .env file solved the issue.
I have a form that allows you to preview coordinates via a google map. The user can dynamically add multiple sets of coordinates to the form. The amount of coordinates are variable.
I loop through the variables with this code which I feel it has to do with loading multiple instances of google maps. The first map loads just fine, but the second map only loads one tile in the far left hand corner. IF I update the coordinates on the form, then all of the maps only show one tile in the far left hand corner.
while (tempClone != cloneCount) {
var lat_lng = new google.maps.LatLng(lat, lng);
options = {
zoom: 14,
center: lat_lng,
panControl: false,
zoomControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map[tempClone] = new google.maps.Map(document.getElementById("map"+tempClone), options);
var infowindow = new google.maps.InfoWindow({
content: inputBL[tempClone][0][1] + 'Entrance'
});
marker[tempClone] = new google.maps.Marker({
position: lat_lng,
map: map[tempClone],
title: inputBL[tempClone][0][1]
});
}
Thank you for any help!
Aaron
It almost looks like you're having trouble getting the map to resize. From what I recall this happens if the map container size changes. Can you try triggering a resize after showing the map?
google.maps.event.trigger(map, "resize");
I'm developing a jQTouch-based app for the iPhone and part of it uses the Google Maps API (V3). I want to be able to pass the geolocation coordinates to the map and have it center the location with a marker. What I'm getting now is the map at the proper zoom level but the desired center-point appears in the upper-righthand corner. It's also showing only about a third of the map area (the rest is gray) and it behaves somewhat erratically when you pan or zoom. Here's the code:
var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
BTW: It looks and behaves the same on other platforms/browsers as well.
Thoughts?
Thanks in advance,
Mark
Added
Here's a link that'll show exactly what's happening:
Screen shot of iPhone emulator
I'm guessing you're using AJAX to display the map, or have the map hidden at some point and then display it based on an action?
In this case Google doesn't know the size of the map container and it will draw only part of the map, usually off-centered.
To fix this, resize the map, then re-center on your lat/lng. Something like this:
google.maps.event.trigger(map, 'resize');
// Recenter the map now that it's been redrawn
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);
The solution for getting the map renedered correctly is to execute your Maps-Code on pageAnimationEnd-Event of jQTouch.
Example within Page #div:
<div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div>
<script type="text/javascript">
$('#map').bind('pageAnimationEnd', function() {
var mapOptions = {
zoom: 13,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: pos
});
map.setCenter(pos);
}, function() {
console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed');
}
);
} else {
console.log('Device Environment Not Capable of Geolocation - Geolocation failed');
}
});
</script>
Though, i find myself having trouble to make the Map fullscreen-height. Any help in this case is appreciated. Note that im using DataZombies bars extension for fixed footer navigation.
see my answer on Google Maps API 3 & jQTouch
basically, your #map_canvas div is not visible at the time you're constructing the map as the div it's in has been hidden by jqtouch. the api can't deal with this and get's the size wrong.
would be much easier if gmaps v3 allowed setting explicit size in the constructor (as v2 did).
anyway, delay constucting map until 'pageAnimationEnd'.
Make sure you have set the width/height of the canvas absolutely (i.e.)
$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());
Of course that assumes you have the jqtouch toolbar up and running...
Had the same exact issue loading a map with directions after loading content with AJAX and showing and hiding the map-canvas div.
You have to trigger the resize event, like Brett DeWoody says, but I found that my global variable went out of scope and I had to refer to them, i.e. the google map variable, INSIDE my functions explicitly on the window object. Here's what I have inside my directionsService response:
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
google.maps.event.trigger(window.map, 'resize');
}
Brett DeWoody's solution worked, but as I'm showing the map in modal the only solution for me was to add setTimeout like this:
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
var reCenter = new google.maps.LatLng(lat, lng);
map.setCenter(reCenter);
}, 500);
After adding setTimeout the map renders and centers perfectly.
Google map api is not showing zoom bar and imagetype completely instead it is just displaying plus minus buttons for zoom in and out and drop down for selecting map type.
Url is http://booking.smanager.net/design/index.php?lv=2 please see tab "Location". I m using firefox 3.6.10. What might be the reason?
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<div id="map_canvas"></div>
Also I want to insert placemarker at several lat/long pairs. I got title and description of several locations which I want to be displayed inside a placemarker. Can anyone tell how to do that?
This usually happens when the map that contains the div isn't sized properly.. whilst you've indicated that you're using V3 api its still something to consider.. some info here:
http://econym.org.uk/gmap/basic19.htm
Duncan