I'm trying to initialize the google maps init function from a function, the working of function is to add a new div tag which will contain a map.
I tried code written in commented area below inside a function but it's not working but its working outside the function.
app.controller('controller1', function($scope, $http, $window) {
$scope.addMapPanel = function() {
var ref_div = angular.element(document.querySelector('#ref_div'));
var map_div = angular.element(document.querySelector('#map_div'));
if(map_div.length){
console.log('exist');
}else{
console.log('doesnot');
ref_div.append('<div class="col-md-6" id="map_div"></div>');
}
/*$scope.initialize = function() {
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', $scope.initialize);*/
};
});
similar type answer : How do I add google map in angular.js controller?
You still need to have the DomListener call some function once that library has been loaded. From there, just check to see if the div exists. If not, you need to append it and then initialize a map onto that div.
However, I would recommend using directives for DOM interaction, as that is where View logic should exist in the MVC architecture. Plus, it allows reuse.
angular.module('app', []).
controller('mapController', function($scope) {
$scope.initialize = function () {
var ref_div = angular.element(document.querySelector('#ref_div'));
var map_div = angular.element(document.querySelector('#map_div'));
if(map_div.length){
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}else{
ref_div.append('<div class="col-md-6" id="map_div"></div>');
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
};
google.maps.event.addDomListener(window, 'load', $scope.initialize);
});
#map_div {
width: 150px;
height: 150px;
}
<div id="ref_div" ng-app="app" ng-controller="mapController">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js">
</script>
Related
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>');
}
What I want to achieve:
I want to display a search box in google map. When a user search a location, result is displayed in map box. On the map, when a user RightClick, I want to store the marker in database.
Resource I tried to implement
storing marker to database:
https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database
displaying search box in map
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I tried to implement these two as one: here is my minimal code
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
With this code when I right click on the map, nothing happens i.e. neither the marker shows nor any error.
The map variable needs to be accessible from your create_marker function, therefore you declared it outside of your other functions. But also inside the map_initialize function. Remove the var declaration from there and it will work.
I have edited your original question to include a MCVE which means that I removed 90% of your code to keep only what you were after: adding a marker on right click.
Please take that as a suggestion for how to write your next questions.
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
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')
}
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>
This question has been asked a couple of times, but no response has worked for me. I tried to add width and height to container div
<div style="height:900px;width:1024px;">
Mapa
<div id="map" class="map"></div>
</div>
Tried either to add the domListener Event to google maps object or just using jquery document.ready function
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });
I created this Jsfiddle to show my point, I know that I am missing the API key but this doesn't seems to be the problem.
I don't know what I am missing here. Any ideas?
I know that I am missing the api key
Snippet with code Below
function initialize(){
$(".map").each(function(){
var centerLat = 52.5230809;
var centerLong = 13.3999976;
console.log(centerLat);
console.log(centerLong);
var centerLatLong = new google.maps.LatLng(centerLat, centerLong);
var mapOptions = {
center: { lat: parseFloat(centerLat), lng: parseFloat(centerLong)},
zoom: 8,
scrollwheel: false,
draggable:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
console.log(map);
var marker = new google.maps.Marker({
position: centerLatLong,
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });
<div style="height:900px;width:1024px;">
Mapa
<div id="map" class="map"></div>
</div>
You should add css to map div.
<div style="height:900px;width:1024px;">
Mapa
<div style="height:900px;width:1024px;" id="map" class="map"></div>
</div>
As #egvrcn 's answer. But why are you using .each() ? You want to use multiple maps ?
Yes ?
function initialize() {
$(".map").each(function () {
var $this = $(this);
// ...
var map = new google.maps.Map($this[0], mapOptions);
// ...
});
}
No ?, so do just...
function initialize() {
// ...
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// ...
}