hi i´m quite new to the topic and after a few hours trying i´m close to the goal, but not there i think i would need a little kick.
so far i was able to create a styled map and get 2 markers in position on the map. zoom and some other stuff is clear to me how to influence.
here is the code:
<html>
<head>
<title> test map </title>
<style type="text/css">
#map {
width: 750px;
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', init);
function init()
{
var mapOptions = {
zoom: 2,
panControl: true,
zoomControl: true,
center: new google.maps.LatLng(33.524385, -112.048899),
//
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}]}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 20}]}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}]}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"}, {
"lightness": 29}, {
"weight": 0.2}]}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 18}]}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 16}]}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 21}]}, {
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"}, {
"color": "#000000"}, {
"lightness": 16}]}, {
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36}, {
"color": "#000000"}, {
"lightness": 40}]}, {
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"}]}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"}, {
"lightness": 19}]}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"}, {
"lightness": 20}]}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"}, {
"lightness": 17}, {
"weight": 1.2}]}]
};
var mapElement = document.getElementById('map');
var myMap = new google.maps.Map(mapElement, mapOptions);
var pos = new google.maps.LatLng(33.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
var pos = new google.maps.LatLng(5.524385, -12.048899);
var poi_marker = new google.maps.Marker(
{
map: myMap,
draggable: false,
animation: google.maps.Animation.DROP,
position: pos
});
}
</script>
</head>
<body>
<div id="map"> </div>
</body>
</html>
what works fine for me. i see the style i like plus 2 positions with the classic marker.
Map from code above Sample
then i looked a bit more around and found out that you can have info boxes with markers. i would like to add HTLM to those boxes for each marker i create.
the google rep. gives this example which works fine for me:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en
i would like to add a couple of those to my map like i did on the 2 simple marker postions, but i honestly do not know where to place the code i see in the above link.
tried all kinds for the last 2h and now feed up. i do something wrong, as this should work.
the cherry on the candy would then, if someone would know, where to place the code for giving the Marker my own style. i have found some examples for that. so i would be cool to have it custom all the way.
thx for your help, ideas or whatever you contribute!
You want the infobox to propogate when you click on the marker right? For this you'll need to set a listener that listens for each plotted marker to be clicked and then generate an infobox once it's done.
EDIT: By marker style do you mean custom icons? In
google.maps.Marker
just put inicon: new google.maps.MarkerImage(FILEPATH)
and then the file path to the image you'd like to use as the custom marker.EDIT 2: Still early in the morning. I forgot
var infowindow = new google.maps.InfoWindow();
I've added it in now.EDIT 3: In the map with the infoboxes already working, just make your mapOptions look like this:
That's got it working for me.