Multiple Google Maps on same page - google-maps

I have seen some topics about this on this forum but didn't get the answer I was looking for.
If I'm using such a code:
<script type="text/javascript">
(function() {
window.onload = function(){
var pinkParksStyles = '';
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Our Location"});
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(41.3850639,2.1734035),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
map.mapTypes.set('pink_parks', pinkMapType);
map.setMapTypeId('pink_parks');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.3850639,2.1734035),
map: map
});
}
})();
</script>
<script type="text/javascript">
(function() {
window.onload = function(){
var pinkParksStyles = '';
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Our Location"});
var mapOptions2 = {
zoom: 11,
center: new google.maps.LatLng(41.3850639,2.1734035),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
}
};
var map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);
map2.mapTypes.set('pink_parks', pinkMapType);
map2.setMapTypeId('pink_parks');
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(41.3850639,2.1734035),
map: map2
});
}
})();
</script>
So I have two divs with ID map_canvas1 and map_canvas2. But only the second one gets shown. I have this imported in the header of the document: http://maps.google.com/maps/api/js?sensor=false
I need to make both work but with seperated javascript. Did manage it with getting all into same function, but I need it to be seperated.
Any advice?
THANKS!

make two seperate javascript functions out of it, and put both in the onload function.
Like this:
window.onload = function(){
function1(variable);
function2(variable);
}
function1(variable) {
do stuff;
}
function2(variable)
do other stuff;
}
Alternatively you could use jQuery to handle the onload, i think that can actually add multiple handlers to the body onload. See also http://api.jquery.com/ready/
javascriptmap.php?map=xxx
$(function() {
$("#divID").each( function() {
showMap(divID);
});
});
showMap(divID) {
show map on #divID
};
On the html/php file:
<script scr="javascriptmap.php?map=map1" />
<script scr="javascriptmap.php?map=map2" />

Related

how to use % instead of px to set height in google map?

i'm new here and trying to ask how to use percentage instead using px, i'm not sure is that my code problem or anything else, so i just show my code here to check is it whether my code problem or what, i tried use % in my code but doesn't work for me.
<script type="text/javascript">
var markers = [
{
"lat": '3.147746',
"lng": '101.575272',
"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
},
];
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
(function (marker, data) {
google.maps.event.addListener(marker, "mouseover", function (e) {
infoWindow.setContent("<div style = 'width:300px;min-height:10px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
this code is work for me
<div id="map" style="height: 550px"> </div>
and i tried this code but not work
<div id="map" style="height:80%"></div>
You need to do one thing. Just give 100% height to body tag
<body style="height:100%;">
</body>
Now you can try
<div id="map" style="height:80%"></div>
It will work.
It is a CSS limitation. % does not work for height.
Instead, try using the well known method for YouTube responsiveness :
Put your content in absolute positioning into a container with a padding-top:80%
padding-top/-bottom % are based on the container width.

Problems with geolocation

I want to make an application that shows your current position on a map with a marker. The code I've done seems to work but it doesn't display the marker. Can someone help me, please?
Here's my app.js:
var app = angular.module('starter', ['ionic', 'ngCordova']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.controller('MapController', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$ionicPlatform.ready(function() {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
$ionicLoading.hide();
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
google.maps.event.addListener($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(myLatlng)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
infowindow.open(map, marker);
});
})
});
You are using
var long = position.coords.longitude;
whereas long is a keyword in javascript. Check the link below.
https://www.w3schools.com/js/js_reserved.asp
Unless you are using ECMAScript 5/6 standard
Try to add Latitude and Longitude in following way to new google.map.LatLng(...)
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(lat, long)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
Hope this will help to you
Spent a very hair-tearing hour or so trying to get the good old W3C geolocation example to work in my particular application. Didn't see this:
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
If you are NOT using https you may (will?) get a silent, non-functioning outcome, both in Chrome and Firefox! As soon as I switched to https, it was fine.

Google Maps API v3 map not loading completely

I am having some difficulty with a google map. The problem is that only a small portion of the map is loading as shown here:
After the page loads, if I resize the browser even the slightest amount, this causes the complete map to refresh and load correctly, as shown here:
Here is my javascript code:
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
var $width = document.getElementById("propertysection").offsetWidth;
$('#map-canvas-2').width($width-28-175);
$('#map-canvas-2').height($width);
$('#myGridMap').height($width);
});
function initialize() {
var map;
var propertyMap;
var marker;
var infowindow;
var myOptions = {
zoom: 6,
center:new google.maps.LatLng(50.7,-86.05),
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);
infowindow = new google.maps.InfoWindow({
content: 'Property Info',
position: new google.maps.LatLng(0, 0)
});
}
Can anyone suggest what the problem might be? Thanks.
You shouldn't mix the jquery ready method with the window load event (see http://api.jquery.com/ready/).
Instead, call initialize from within your .ready function, or place the window resize functions in the initialize method itself (before initializing the map).
I am using bootstrap and a mega menu and I resolved it with using the official Google Maps API asynchronous load function. https://developers.google.com/maps/documentation/javascript/tutorial#asynch
function initialize() {
var myLatLng = new google.maps.LatLng(37.4221147, -122.0867373);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(37.4221147, -122.0867373),
zoom: 12,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var contentString =
'<b>Google Gate Bridge</b>' +
'<p>Mountain View, CA 94043, USA</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map,marker);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var tab = document.getElementById('YourHtmlObjectID');
YourHtmlObjectID.onmouseover = loadScript;
YourHtmlObjectID.onclick = loadScript;

GoogleMaps: Setting a marker on user click

Currently I'm trying to set markers on a map based on user clicks. I have tried everything I can think of and NOTHING works. It seems as though my map doesn't even detect clicks. Currently, I'm trying to keep the script as simple as possible, I'm just trying to detect clicks on the map at this point:
<script type="text/javascript">
function initialize()
{
<!-- Set the initial location-->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
</script>
I've tried so many variants on this sort of code, every it never works. If I change it to "addDomListener(window, ...)" it works, but never using the map as the listener. Ideas?
EDIT: OK, solved it by changing the function somewhat and changing its location in the script:
<script type="text/javascript">
function initialize() {
<!-- Set the initial location -->
var latlng = new google.maps.LatLng(44, -71);
<!-- initialization options -->
var myOptions = {
minZoom: 3,
zoom: 8,
maxZoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
<!-- The map variable-->
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
<!-- END INITIALIZE -->
}
google.maps.event.addDomListener(window, 'load', initialize);
<!-- Add the functionality of placing a marker on a click-->
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
alert('You clicked the map.'+event.latLng);
});
</script>
I guess you place this code in improper place (or do it in improper time). Recently I've encountered with the same problem and it took some time to solve it. Look what works for me:
var mapservice = {};
mapservice.map = {};
mapservice.options = {};
mapservice.putMarker = {};
mapservice.init = function (divName, textSearch)
{
this.options =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map($(divName)[0], this.options);
google.maps.event.addListener(this.map, 'click', function (event)
{
mapservice.putMarker(event.latLng);
});
}
mapservice.putMarker = function (location)
{
//...
}

How do I use Google map data in other form elements?

How do I take Google map coordinates from the map and automatically populate another form element?
This is my form: http://www.barbadosphonebook.com/list-your-business-for-free/. At the bottom there is a Google map which, on-click, displays the coordinates. I would love it to also populate the element below with the coordinate data.
My map code:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(13.175771, -59.556885);
var myOptions = {
zoom: 10,
center: latlng,
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//
var contentString = '<strong>Copy the numbers between the brackets</strong><br />';
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.InfoWindow ( { position: event.latLng, content: contentString+event.latLng.toString() } ).open(map);
});
}
</script>
You could try changing your map click listener to this:
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.InfoWindow ( { position: event.latLng, content: contentString+event.latLng.toString() } ).open(map);
$('.ginput_container input').val(event.latLng.toString());
});