Multiple Map Point in a Google Maps, and a special icon
Author: Hakan S.
Visited 3048,
Followers 3,
Shared 0
Hi,
How can i add the multiple map pin into a Google Maps?
Forexpamle; i have 20 (known lat and long ) different map point and i want to put them with the special icon.
You can see the following example
Posted on the
Hakan, I suspect this is a payed-for service offered by google.
You could however "dummy one up" by taking a screen print of a map and placing your icons. You can then set a link to the live google map. If you are a bit enthusiastic, you could create an image map so that each icon selected goes directly to that address on the live google map.
Hi Hakan,
Showing pins on a map, with one or more custom images isn't a payed service. I use this in my own Filemaker app.
However, this will take some Javascript programming. If you are up to this you can find the API-documentation, tutorials and lots of examples at Google's siteh at
https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/" target="_blank" rel="nofollow">https://developers.google.com/maps/documentation/javascript/">https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/.
Use the HTML-object to place the map on the screen and the page's advanced properties to define the api-key in the header.
Succes,
Robert
Hello Rbbrt
Your link gives a 404
Hello Hakan,
May this video help you? https://www.youtube.com/watch?v=77zo7Nnp_7M
@+, J.P.
Hi John,
Oeps...
This should be the correct link...
https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/" target="_blank" rel="nofollow">https://developers.google.com/maps/documentation/javascript/">https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/
Robert
Hmmm. Don't know what the forum software is doing with the url... It should be
https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/
Sorry, no link
Robert
Hi Hakan,
I've copied the code from my app in a WebsiteX5 project, so I can demo it to you. See http://websitex5.info/google-maps.html (but don't judge the site, this is my personal 'play ground' )
Put the following code before the </head> tag in the page properties (Advanced tab)
// start header part
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIz----this is your google maps api-key---VG0">
</script>
// End header part
Now put a HTML-object on the page where you want it and copy/paste the following code snippet, but for the image(s you have to define your own images and upload them to your webserver and you have to replace the locations with your own locations. Give the html object an appropriate height...
// Copy from here
<script type="text/javascript">
var map=null;
var imgSize = new google.maps.Size(24, 24);
var imgOrigin = new google.maps.Point(0,0);
var imgAnchor = new google.maps.Point(12,24);
// Define the image(s) you use on the map
var imgView = {url: 'https://www.schotlandopmaat.nl/nl/mapicons/viewpoint.png',size: imgSize, origin: imgOrigin, anchor: imgAnchor };
var imgGolf = {url: 'https://www.schotlandopmaat.nl/nl/mapicons/golf.png' size: imgSize, origin: imgOrigin, anchor: imgAnchor };
var imgVissen= {url: 'https://www.schotlandopmaat.nl/nl/mapicons/vissen.png' size: imgSize, origin: imgOrigin, anchor: imgAnchor };
// Define an array with the locations you want to show on the map
var locations = [
["frandy fishery", 56.22323055,-3.69988801,imgVissen],
["Roxburghe Golf", 55.55853871,-2.46941121,imgGolf],
["Culloden Battle Field", 57.47789362,-4.09548569,imgView],
["Mylne's Court", 55.94924490,-3.19431715,imgView],
["Brodie's Close", 55.94920541,-3.19309276,imgView]
];
// The initialization function for showing the locations on the map
function initialize() {
// Define the center of the map on initial show and the initial zoom level
var myLatlng = new google.maps.LatLng(57.46799632,-4.2218578);
var mapOptions = { zoom: 8, center: myLatlng };
// Now show the map
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow=new google.maps.InfoWindow ( {maxWidth: 400 });
// loop through the array of locations and place a marker on the map.
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
if (location[1] != "") {
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: location [3],
title: location[0]
});
// show the info of the marker when clicked on.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
// To here
This should do the trick!
Succes!
Robert
... +++
.