I have a problem with google maps, I have tried to just to set up a normal map, but nothing works all I get is this image:
And this is my code for this:
(function ($) {
var marker;
var map;
var iconBase = 'https://maps.google.com/mapfiles/ms/icons/';
var infowindow;
function initialize() {
getCoordinate(function (location) {
setUpMap(location.latitude, location.longitude);
});
}
function setUpMap(lat, long)
{
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeControl: false,
streetViewControl: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
function codeAddress()
{
//Resellers is a global varaible that holds all the resellers addresses
Object.keys(resellers).forEach(function(key){
var reseller = resellers[key];
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(reseller.lat, reseller.lng),
icon: iconBase + 'green-dot.png'
});
(function (marker) {
// add click event
google.maps.event.addListener(marker, 'click', function () {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
title: key,
content: '<div style="color: black; height: 150px;">' + reseller.address + '</div>'
});
infowindow.open(map, marker);
});
})(marker);
gmaerksp.push(marker);
});
}
function getCoordinate(callback) {
navigator.geolocation.getCurrentPosition(
function (position) {
var returnValue = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
var location = returnValue;
callback(location);
}
);
}
google.maps.event.addDomListener(window, 'load', initialize);
}(jQuery));
#map-canvas{
width: 1200px;
height: 600px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
And I have no idea why the map is not loading, the markers is loading as it should. But as you can see, the zoom tools is not correctly loading either. So you guys have any idea what is wrong? I have tested with change the div size to but it still loads the same.
Well after more debugging, I found the answer! It seems like google maps can't be inserted with wordpress shortcode. I don't know why, but as soon as I move it out to it is own template instead it works like a charm.
So if any other persons have the same problem out there, and have put there google maps in a shortcode, try to move it out from there and see if it works.
Related
Not the best with javascript and got some trouble with some google maps code but it is sporadic on MS Edge but consistent on Chrome and the markers will not load. On edge if you keep request the page sometimes it works but more than often fails.
ERROR: not a LatLngBounds or LatLngBoundsLiteral: not an Object name:
"InvalidValueError"
script is called using below code
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX&libraries=places"></script>```
<script async type="text/javascript" src="{{media url='scripts/store-locator.js'}}"></script>```
require(["jquery"], function ($) {
$(document).ready(function () {
initialize();
});
var geocoder,
map,
markers = [],
infowindow = new google.maps.InfoWindow(),
bounds = new google.maps.LatLngBounds(),
marker, i;
var locations = [
{ id: 1, name: 'Store1', lat: 58.482514, lng: -1.784622 },
{ id: 2, name: 'Store2', lat: 54.687925, lng: 0.312584 }
];
function initialize() {
// set the default google map settings
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
var latlng = new google.maps.LatLng(52.727440, -1.543299);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// register the google map elements
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// register the directions display
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions'));
addMarkers();
map.fitBounds(bounds);
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
// setup control position
control = document.getElementById('store-selector');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
control.style.display = 'block';
});
}
// add the markers from the array to the map
function addMarkers() {
$.each(locations, function (key, value) {
// create the marker
marker = new google.maps.Marker({
position: new google.maps.LatLng(this.lat, this.lng),
map: map,
name: this.name
});
// add the marker to the cached array
markers.push(marker);
bounds.extend(marker.position);
// add the event listerner for the marker click function
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
// info window display
map.setZoom(16);
map.setCenter(marker.getPosition());
}
})(marker, i));
});
}
});```
Ok I think I have resolved it thanks to geocodezip who suggested a timing issue. was erroring on $(document).ready(function () {
initialize();
});
I've moved this to the bottom of the file and it seems to be running all good now..
I a using Google Maps in my app.
The user is to be able to place a marker on any place in the map.
To this end I wrote the following code:
var marker;
function myMap() {
var mapCanvas = document.getElementById("map-canvas");
var myCenter=new google.maps.LatLng(50.833,-12.9167);
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
//marker.setMap(null); // this line does not work
placeMarker(map, event.latLng);
});
}
function placeMarker(map, location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
The marker is supposed to always move to the place where the user clicked.
The line
marker.setMap(null);
is supposed to remove the old marker (before the new marker is placed).
However, with this line in the code I cannot place any markers any more. Not including this line means that every marker stays in the map and is not removed (i.e. the map is filling up with markers over time).
Look at the javascript console, you will see Uncaught TypeError: Cannot read property 'setMap' of undefined. The first time, marker is null, you need to only set its map property to null if it already exists.
google.maps.event.addListener(map, 'click', function(event) {
if (marker) marker.setMap(null);
placeMarker(map, event.latLng);
});
proof of concept fiddle
code snippet:
var marker;
function myMap() {
var mapCanvas = document.getElementById("map-canvas");
var myCenter = new google.maps.LatLng(50.833, -12.9167);
var mapOptions = {
center: myCenter,
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
if (marker) marker.setMap(null);
placeMarker(map, event.latLng);
});
}
function placeMarker(map, location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
The problem is that you try to use method setMap after the first click when marker variable doesn't have this method. So, first check if marker has the method and then call it.
google.maps.event.addListener(map, 'click', function(event) {
// check if setMap is available and call it.
if(marker.hasOwnProperty('setMap')){
marker.setMap(null);
}
placeMarker(map, event.latLng);
});
i have a problem with my places from google maps, i already have a functionality map with a file kml in my https server, but i don't want to download and upload the map every time I make changes, not work for me only embed I need manipulated with API, so this is my code:
var map;
var src = 'MY_SERVER/points_vl.kmz';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.63736, -105.22883),
zoom: 2,
});
loadKmlLayer(src, map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = 'http://www.nearby.org.uk/google/circle.kml.php?radius=5miles&lat='+position.coords.latitude+'&long='+position.coords.longitude;
loadKmlLayer(circle, map);
map.setCenter(pos);
setTimeout(function(){
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Current Location'
});
infowindow.setPosition(pos);
}, 2000);
});
}
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
This work fine, but have a way for direct the kml from my url of google maps places?
Using an existant Google 'My Places' map with Maps API v3 styling this thread have some idea, but not work, if you get a idea how make it will make it wonderful
Go to your "MyMap" map. Click on the three dots next to the name of the map, click on "Export to KML":
Choose the "Keep data up to date with network link KML (only usable online):
Rename the .kmz file to .zip, then open it and open the doc.kml file it contains. That file will have the direct link to the KML data specifying your "MyMap".
Use that link in a google.maps.KmlLayer
proof of concept fiddle
original MyMap
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/kml?mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w',
map: map
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- add your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
I am new to JS and having challenges on resizing my google map. My problem: that only a third of my map is displaying and this is because a resize trigger needs to be implemented. My question: Where exactly do I correctly place the below trigger code within my script to implement it correctly.
Any help will be much appreciated
google.maps.event.trigger(map, 'resize');
Script:
<script type="text/javascript">
var map;
/*use google maps api built-in mechanism to attach dom events*/
google.maps.event.addDomListener(window, "load", function () {
/*create map*/
var map = new google.maps.Map(document.getElementById("googleMap"), {
center: new google.maps.LatLng(51.506477,-0.071741),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*create infowindow (which will be used by markers)*/
var infoWindow = new google.maps.InfoWindow();
/*marker creater function (acts as a closure for html parameter)*/
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
});
}
return marker;
}
/*add markers to map*/
var marker0 = createMarker({
position: new google.maps.LatLng(51.506477,-0.071741),
map: map,
icon: "../../account/gallery/1700728/images/marker-red.png"
}, "<p>Saint Katharine's Way London E1W 1LD, United Kingdom</p>");
});
$(document).ready(function() {
$('#googleMap').css({'width':'100%','height':'380'});
google.maps.event.trigger(map, 'resize');
});
</script>
I know this is a common problem here, i already look at all the topics here for a solution, but still, when i change tabs i continue with this problem:
please take a look at my js code:
function initialize() {
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(43.654372, -7.914174);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myOptions1 = {
zoom: 16,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
//google.maps.event.trigger(map1, 'resize');
//map1.setCenter(myLatlng1);
var marker = new google.maps.Marker({
position: myLatlng,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<\/div>'+
'<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
'<div id="bodyContent">'+
'<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
'<\/div>'+
'<\/div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map1,marker1);
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
google.maps.event.addListener(map, "idle", function(){
marker1.setMap(map1);
});
// To add the marker to the map, call setMap();
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(myLatlng); // be sure to reset the map center as well
});
google.maps.event.addListenerOnce(map1, 'idle', function() {
google.maps.event.trigger(map1, 'resize');
map1.setCenter(myLatlng1); // be sure to reset the map center as well
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
i have two maps, one ofr each tab. i could solve the problem of the center point being hide on the left corner with this from other post:
.ui-tabs .ui-tabs-hide { /* my_tabs-1 contains google map */
display: block !important;
position: absolute !important;
left: -10000px !important;
top: -10000px !important;
}
but the problem stated here i had no luck even lookin at other topics here.
I found the clean solution:
<script type="text/javascript">
function showAddressMap(){
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
// searchQuery is the address I used this in a JSP so I called with $
geocoder.geocode( {'address': "${searchQuery}"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
google.maps.event.trigger(map, 'resize');
//}
}
JQ(document).ready(function(){
JQ('#tabs').tabs();
JQ('#maptab').bind('click', function() {
showAddressMap();
});
});
</script>
<div id="tabs">
<li><fmt:message key="fieldset.map"/></li>
</div>
<div id="tabs-1">
<fieldset>
<div id="map_canvas" style="height:500px; width:100%;"></div>
</fieldset>
</div>
You need to set the center and trigger a re-size event.
MyMap.setCenter(MyCenterCoords);
google.maps.event.trigger(MyMap, 'resize');
This code google.maps.event.trigger(map, 'resize') should be in the pageshow like below.
$('#map_result').live('pageshow',function(event){
google.maps.event.trigger(map, 'resize');
});
By the way, have you found the solutions for this? I actually make it works using css.
I know its not a elegant solution, but you can just add an Iframe inside each tab. and when you click the tab, the map load with the correct sizes.