I'v managed to implement the Google Maps Api which shows multiple marker, but the Maps Div is always showing some misbehavior like in the picture below (shadow is incorrect, there is a wave (?!) under the "vienna" title, and on the left side the control-buttons are missing).
I'm using chrome on mac, has restarted my mac a few times, and it is reproducible on firefox and safari.
My code looks like:
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&sensor=false"></script>
</head>
<div id="map" style="width:500px;height:500px;"></div>
<script type="text/javascript">
var locations = [
['Vienna',48.2144203,16.383573,1]
['Test',48.53234,16.32367,2]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(48.2144203,16.383573),
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>
this problem commonly comes from bootstrap. just add inline style in your gmaps page with max-width:none; and it will be fixed.
<style>
img {max-width: none !important;}
</style>
Related
I got a question regarding this code for googlemaps for my website. My website is pretty big (350 pages) and I am using a website that saves me a lot of time by quickly creating code without me manually writing it.
However this website injects some links in their code for advertisement and backlinks (https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit).
What should I remove from this snippet to get rid of it without making whole code non workable? This is my first question on this website, Im sorry if this is a common question and I didnt find an answer.
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDvV9lr4YTbExSlhYI2e26aTEaoY2peUwE'></script>
<div style='overflow:hidden;height:280px;width:1382px;'>
<div id='gmap_canvas' style='height:280px;width:1382px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div> <a href='https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=274228f8880db3e0b587b128af8f2a5a49d26d62'></script>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(47.4464864, 9.526921600000037),
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.4464864, 9.526921600000037)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Klinik Am Rosenberg</strong><br>Hasenbühlstrasse 11<br>9410 Heiden<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
Looks like you need to remove both of these lines:
<a href='https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=274228f8880db3e0b587b128af8f2a5a49d26d62'></script>
working code snippet:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDvV9lr4YTbExSlhYI2e26aTEaoY2peUwE'></script>
<div style='overflow:hidden;height:280px;width:1382px;'>
<div id='gmap_canvas' style='height:280px;width:1382px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(47.4464864, 9.526921600000037),
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.4464864, 9.526921600000037)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Klinik Am Rosenberg</strong><br>Hasenbühlstrasse 11<br>9410 Heiden<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
In this case, isn't the only thing you want to remain the link?
<a href='https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit</a>
From the snippet, the rest appears to setup to display the maps (reference the API (script tag), setup the 'canvas' (div tag) and then authorize/invoke (last two script tags).
Note the first line might be used on other pages as well if you have multiple references (othwerwise all should be able to be removed I would expect):
Is this what you were looking for?
I am trying to connect to the Google Maps API from a localhost through an AngularJS application but the map does not appear and the map request does not reach google. The javascript file is being found by the html, and test1 is being outputted in the console, but initMap is not being called and test2 is not outputted. I expect that it is failing because a https connection is not being made to Google.
When I open the html file in a browser, the map loads fine but when I run it on my localhost, nothing comes up.
Here is my html code:
<script src="client/services/maps.client.services.map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{API_KEY}}&callback=initMap"></script>
and javascript (map.js):
console.log('test1');
function initMap() {
console.log('test2');
//Markers
var markers = [
['Cardiff', 51.4539, -3.1694, 'city/cardiff'],
['Swansea', 51.6148, -3.92927895, 'city/swansea']
];
// Initialise map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 51.4539, lng: -3.1694}
});
var bounds = new google.maps.LatLngBounds();
for( i = 0; i < markers.length; i++ ) {
// Plot pin for each place
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]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
window.location.href = markers[i][3];
}
})(marker, i));
}
// Zoom so all pins are in view
map.fitBounds(bounds);
}
Does anyone understand why the initMap function is not being called?
change the order of the script tags
<script src="https://maps.googleapis.com/maps/api/js?key={{API_KEY}}&callback=initMap"></script>
<script src="client/services/maps.client.services.map.js"></script>
I am using google map on my site and here is google map code:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:440px;width:700px;'>
<div id='gmap_canvas' style='height:440px;width:700px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(51.5073509, -0.12775829999998223),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.5073509, -0.12775829999998223)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Title</strong><br>London, United Kingdom<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
and getting this map output:
Currently, I have a div which highlight in Red color and marker is displaying beside Red area so I want to move to the left side.
Now I want to move marker on left side and don't want to use center position because I am showing contents on red area on below example:
Any idea how to move the marker on the top left side?
Thanks.
You can easly shift the map assigning a new center .. (the new coord are for sample)
var newCenter = new google.maps.LatLng(50.5073509, 0.1200)
map.setCenter(newCenter);
You can change the the marker by javascript function
function changeMarkerPosition(marker) {
var latlng = new google.maps.LatLng(-24.397, 140.644);
marker.setPosition(latlng);
}
For more information See this link
Hi i have trouble to find what case a problem to showing the way point on goggle maps as there were no changes in the code for a wile. way point stop showing about last week. im not familiar with google api
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints =
[ [52.664167, -8.509825,' HQ','favicon.ico'] ,[52.836346, -6.913117,'point 1','http://maps.google.com/mapfiles/ms/icons/red.png ' ],[52.836202, -6.912101,'point2','http://maps.google.com/mapfiles/ms/icons/red.png ' ]];
function initialize() {
var myOptions = {
zoom:7,
center: new google.maps.LatLng(53.112, -7.448),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var mcOptions = {
gridSize: 30,
maxZoom: 15
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up markers based on the number of elements within the myPoints array
for(var i=0; i<myPoints.length; i++){
createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2], myPoints[i][3]);
}
mc.addMarkers(markerArray , true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, html, icons) {
var contentString = html;
var links = icons;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: links ,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
// marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
markerArray.push(marker); //push local var marker into global array
}
window.onload = initialize;
<script src="https://maps.googleapis.com/maps/api/js?v=3"
type="text/javascript"></script>
<div id="map" style="width: 800px; height: 750px;" ></div>
Any suggestions?
It seems that you are using MarkerClusterer which is a part of google maps utility library, which was moved recently. Somebody probably referenced the library straight from code.google.com/svn/... in your project, where it's not available anymore and that's why it's broken. You need to find all libraries which are referenced from https://google-maps-utility-library-v3.googlecode.com/svn and replace then with your own links.
Check this SO question, user had very similar issues to yours.
Also! check this question and answers on SO!!, there are users who experienced issues with the same library, to get more information. Read all answers, as replacing https://google-maps-utility-library-v3.googlecode.com/svn with https://rawgit.com/googlemaps/... is not a correct solution, you should download the library assets into your project and reference them from there or use CDN (but not git!).
I have different Names and Latitude and logitude and now i want to highlight the particular marker with Blinking rectangular border, than we can add the SVG Code to the particular marker. But I don't know the SVG code Can any one suggest how to add.
How to add the Overlaying SVG blinking rectangular Border with Blinking to a particular marker,
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1330px; height: 850px;"></div>
<script type="text/javascript">
var locations = [
STHOWBGA01_ATIF_RNID_L015,24.31026,93.56268,
SWKHMRID01_BILF_RNID_L039,25.65182,91.62737,
SMOKZUNB01_GTLF_RNID_L006,26.019,94.53,
SDIMSGRN01_ATCF_RNID_L023,25.8271,93.6853,
SKOHKRMA01_BILF_RNID_L010,25.5815,94.21959,
SMOKANGB01_BILF_RNID_L001,26.214,94.6876,
SDIMDIM087_ATIF_TTID_L026,25.8939,93.7602,
SWKHLYNKI1_GTLF_RNID_L061,25.5041,91.6109,
SIMWIMP109_ATCF_TTOD_L047,24.83982,93.97707,
SDIMZLUKI2_ATCF_RNID_L017,25.63998,93.66512,
GWTRTLMUR5_BILF_RNOD_L039,23.841,91.6202,
GWTRKLBRI1_BILF_RNOD_L017,23.50866,91.26185,
GWTRBXNGR1_BILF_RNOD_L033,23.61268,91.17243,
GWTRAGR101_BILF_TTOD_L055,23.8655,91.25584,
GWTRBIS007_BILF_RNOD_L022,23.6785,91.2963
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(24.31026,93.56268),
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, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addDomListener(window, 'load', LatLng);
</script>
<div id="map-canvas"></div>
</body>
</html>
Please suggest,
Thanks.
You would need to create an SVG symbol as you desire first and then associate them with the markers. Although I think you would have to make the custom icon and embed it in the marker class because if you want to customize the marker icons you can only customize them as a whole and not just put border on it.
Here's the SVG docs to create your custom marker icon.
And, here's the sample code from Google to embed them in you marker class.
Hope this helped.