I implemented the api 3 in wordpress with an external js and an action hook. It all works fine except in firefox, part of the info text does not display in the info box. See the screenshot here. It works fine in other browsers.
Here is my complete source code (or on pastebin):
var markers = [
['Shippensburg University',
40.06090, -77.52148],
['Millersville University',
39.99680, -76.35440],
['Kutztown University', 40.50980, -75.78410],
];
function initialize() {
var latlng = new google.maps.LatLng(40.9, -77.5);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("gmap"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: '../university.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
I used an array for the markers. Thanks!
It is an issue (or designed behavior, though why that would differ with Firefox is hard to explain) with the "experimental" version. If I set the "release" version
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3"></script>
It shows the complete text.
Related
I am using the Google Maps API specifically the "Maps JavaScript API", and I have most of the JavaScript code done and the map is shown in my browser (Chrome).
But here is the issue, when I open the the file in Firefox browser or when I open the same file in other computers in their Chrome browser... the map will not show the right way. Mostly the issue is with the zoom feature.
On my Chrome the map will appear as following:
In firefox or some other computers the map will appear as following:
I tried changing the code in different ways, and reading the Google documentation again. I tried using different variations of
map.fitBounds(bounds);
map.panToBounds(bounds);
But I have not gotten any good results from it.
Here is the complete code
<div class="ui-panelgrid-cell ui-g-12 ui-md-12">
<style>
#map {
height: -webkit-fill-available;
display: block;
position: static !important;
}
body #mapOverFlow .ui-dialog .ui-dialog-content {
overflow: hidden;
}
</style>
<div id="map" style="position: relative; overflow: hidden;"></div>
<script>
function initialize() {
var userCoor = [
["<div><h1>JLSKYLL REDES</h1><div><p></p><p><b>22246338</b></p></div></div>", 9.381300800000002, -
84.14509079999999
],
["<div><h1>Lirio Lodge</h1><div><p>Lirio Lodge is the ideal place for lovers of nature, has a privileged location in front of the beautiful Laguna Madre of God, in the channels of Tortuguero.</p><p><b>22825003</b></p></div></div>",
9.94591, -84.11847569999999
]
];
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 2
};
var marker, i, userCoordinate, map;
var bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var userCoorPath = [new google.maps.LatLng(9.381300800000002, -84.14509079999999), new google.maps.LatLng(
9.94591, -84.11847569999999)];
userCoordinate = new google.maps.Polyline({
path: userCoorPath,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 2
});
userCoordinate.setMap(map);
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < userCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
map: map
});
var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(loc);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(userCoor[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
center = bounds.getCenter();
map.fitBounds(bounds);
map.panToBounds(bounds);
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize">
</script>
</div>
The map should be shown in your browser when you open the file and add the API_KEY. Now it may appear with the zoom, or i can appear all far away.
Try in Firefox and Chrome.
Your map has no center set. Note that this is a required parameter, but you never assign the value of center = bounds.getCenter() to your map instance. Try adding the code below:
const center = bounds.getCenter();
map.setCenter(center);
In addition, your map has a zoom level of 2. Change it to e.g. 8 if you don't want your map to appear all far away.
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
Take a look at this jsfiddle for demonstration and guidance. It works regardless of browser.
Hope this helps you.
This question already has an answer here:
Open infoWindows from an external link outside of the google map
(1 answer)
Closed 4 years ago.
I am displaying markers and info windows on a Google Map using the following (partial) code. I have a listener setup so that when you click a marker, the corresponding info window shows (attached to the marker).
My question is, how can I access the info windows outside of this listener? For example, if I wanted to write Javascript to arbitrarily choose an info window and display it over its marker, can I do that by using its ID somehow?
This code was mostly taken from Google example scripts.
var bounds=new google.maps.LatLngBounds();
var infowindow=new google.maps.InfoWindow(), marker, i;
for (i=0; i<markerLength; i++){
var position=new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker=new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
setmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function(){
infowindow.setContent(infocontent[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
You could use the position of the marker in an array (if you know it) or you could assign your markers with some custom id property and trigger a click event on a specific marker based on that id.
var map = null;
var markers = [];
var infowindow = new google.maps.InfoWindow();
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Setup three markers with info windows
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
createMarker(point, 'This is marker with id aaa', 'aaa');
point = new google.maps.LatLng(43.91892, -78.89231);
createMarker(point, 'This is marker with id abc', 'abc');
point = new google.maps.LatLng(43.82589, -79.10040);
createMarker(point, 'This is marker with id ccc', 'ccc');
}
function createMarker(latlng, html, id) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
myCustomId: id
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
function clickMarker(id) {
// Loop through markers array
for (var i=0; i<markers.length; i++) {
// Check custom id
if (markers[i].myCustomId === id) {
// Trigger marker click
google.maps.event.trigger(markers[i], 'click');
}
}
}
initialize();
#map_canvas {
height: 150px;
}
<div id="map_canvas"></div>
<hr>
<button onClick="clickMarker('aaa')">Marker with id aaa</button>
<button onClick="clickMarker('abc')">Marker with id abc</button>
<button onClick="clickMarker('ccc')">Marker with id ccc</button>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Using the Google Maps API with the places library I am able to show nearby schools using the recommended method shown here.
var map;
var infowindow;
function initMap() {
var pyrmont = {lat: -33.867, lng: 151.195};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 500,
type: ['store']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
Here's a working fiddle: https://jsfiddle.net/api/post/library/pure/
The problem is that if I also want to show nearby stores as well as schools, everyone seems to recommend simply doing this:
type: ['store', 'school']
While this technically works, the problem is the map just shows a bunch of meaningless default markers with no way of knowing what it what.
So my question is: How can I change the icon for the schools and stores? Ideally I would show a different icon for each different type.
It's no different than adding custom marker in regular map.Only thing is that you need to make api calls separately for each type.So even type: ['store', 'school'] would work and you get results but there is no type specifier in the results to tell whether it's a school or shop .Also you would need to create their separate callbacks for setting their separate icons
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
icon:"http://example.com/icon.png", //<-- only this line is enough for icon
map: map,
position: place.geometry.location
});
go through this for a better understanding
Moreover every result will have a default icon (as icon property), that can also be used
var marker = new google.maps.Marker({
icon:place.icon,
map: map,
position: place.geometry.location
});
I'm trying to display a Google map in a Bootstrap modal with multiple markers. I have found several posts where people were having problems displaying the map on the modal with just one marker, but none with multiple markers. This is what I currently have, but my map is just showing up gray.
var locations = [...]
var complexMap = new google.maps.Map(document.getElementById('complexes-modal-map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][3],
map: complexMap
});
//extend the bounds to include each marker's position
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(complexMap, marker);
}
})(marker, i));
}
$("#complexes-modal-map-canvas").on("shown.bs.modal", function () {
var currentCenter = complexMap.getCenter();
google.maps.event.trigger(complexMap, "resize");
complexMap.setCenter(currentCenter);
complexMap.fitBounds(bounds);
});
There are 2 things I had to do to make this work. The first thing was an obvious mistake - I was selecting the incorrect element on the "shown.bs.modal" method. I needed to select my Bootstrap modal, not the Google Map. The second thing was to call the "fitBounds" method before calling the "resize" event and setting the center.
$("#complexes-modal").on("shown.bs.modal", function () {
complexMap.fitBounds(bounds);
var currentCenter = complexMap.getCenter();
google.maps.event.trigger(complexMap, "resize");
complexMap.setCenter(currentCenter);
});
I was looking over S.O. and found two questions that combined would solve a problem I am having.
I would like to post pct markers onto google map from Apex report.
passing variable from report works.. javascript:LOCATION(#LOCATION#);
but I can't seem to get the javascript to run.
thanks
<script type="text/javascript">
function LOCATION(pLoc){
var Loc = (pLoc);
var locations = ['+Loc+'];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}}
})(marker, i));
}
}
</script>
thanks for your time.
Your Query:
SELECT stragg(a.location) as location, a.region
FROM
(SELECT DISTINCT rownum
, '['||''''||'test'||''''|| c.lon ||','|| c.lat ||', '||rownum|| ']' as location
, a.pct_name
, b.election_code_id
, c.region
FROM ecms.prv_pcts a
, ecms.sites_assign b
, ecms.sites_details c
WHERE b.site_id = c.site_id
AND b.pct_id = a.prv_pct_id
AND a.pct_name NOT LIKE 'ALL PR%'
AND b.election_code_id IS NOT NULL
AND b.election_code_id = '117'
ORDER by 1, 2
) a
GROUP BY a.region
Would give an output of:
['testLON',LAT,1],['testLON2',LAT2,2]
Calling function LOCATION with these values would provide the function with multiple parameters.
Thus, locations[][] wouldn't exactly work as pLoc is not an array holding arrays. You could fix this by using
SELECT '['||stragg(a.location)||']' as location, a.region
Also,
var locations = ['+Loc+']; kind of defeats the purpose, no?
DISTINCT ROWNUM?