Custom google maps api into WordPress WITHOUGT PLUGIN

2 Views

I’ve built a customised google map based on google maps api. It runs very well on my website.
Now I would like to embed it in a wordpress site WITHOUT using a plugin.

I have looked through other posts in the forum, but couldn’t find anything helpful.

Read More

What are your experiences? Would it be easier to work with a plugin? Or would it be better to have a html-custom map on the front page and then link to wordpress from info windows e.g.?

I would appreciate your help that very much, thanks.

This is the code: 

<!DOCTYPE html>
<html> 
<head>

<meta http-equiv="Content-Style-Type" content="text/css">
<title>Stadtereignisse</title>

<meta name="description" content="Stadtereignisse - Interventionen im &ouml;ffentlichen Raum">
<meta name="keywords" content="Stadtereignisse, Kunstvermittlung, Kulturvermittlung, öffentlicher Raum, public space, Kunst im öffentlichen Raum, temporäre Kunst, temporär">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
   
   <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
    
    
    
</head> 
<body>
<div id="map" style="width: 750px; height: 600px;"></div>



<input id="myCheckbox" type="checkbox" style="width: 28px; height: 28px; background: #fcfff4; background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);" checked="checked" />
  
  
  
  
  
  
  <script>
    // Define your locations: HTML content for mouseover, the info window content, latitude, longitude
    var locations = [
      ['Stadtereignisse - Zusammenfassung', '<h3>Stadtereignisse</h3><p><b>Stadtereignisse</b>, ist ein Kunstvermittlungsprojekt von &icirc;le flottante und Lilian Beidler. Es erm&ouml;glicht sieben Brugger Klassen auf Primar- und Sekundarstufe I die Auseinandersetzung mit den Themenbereichen St&auml;dtebau, &ouml;ffentlich - privat, Kunst im &ouml;ffentlichen Raum und tempor&auml;re Kunstformen. <br> <br> <a href="http://www.loul.ch/stadtereignisse.htm" >Stadtereignisse</a></p>', 47.479122, 8.212523],
      ['4. Juni 2016', '<h1>Samstag 4. Juni 2016</h1><br><p>Am Samstag 4. Juni findet ein festival-&auml;hnlicher Event statt. <br><br> <img src="http://www.loul.ch/pictures/day1.jpg" alt=">day1" px; LEFT:265px; WIDTH:150px; HEIGHT:100px" <br> <a href="http://www.loul.ch/stadtereignisse.htm" >Stadtereignisse</a></p>', 47.479122, 8.205313],
      ['Interventionen', '<h1>Interventionen</h1><p>Die SuS arbeiten w&auml;hrend mehrerern Wochen an verschiedenen Projekten. <br><br> <iframe src="https://player.vimeo.com/video/153269021" width="400" height="224" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/153269021">Voicetrument - by Lilian Beidler</a> from <a href="https://vimeo.com/user17367156">Lilian Beidler</a> on <a href="https://vimeo.com">Vimeo</a>.</p></p>', 47.481122, 8.205313]
    ];
    
    


var events = [
      ['Stadtereignisse - Zusammenfassung', '<h3>Stadtereignisse</h3><p><b>Stadtereignisse</b>, ist ein Kunstvermittlungsprojekt von &icirc;le flottante und Lilian Beidler. Es erm&ouml;glicht sieben Brugger Klassen auf Primar- und Sekundarstufe I die Auseinandersetzung mit den Themenbereichen St&auml;dtebau, &ouml;ffentlich - privat, Kunst im &ouml;ffentlichen Raum und tempor&auml;re Kunstformen. <br> <br> <a href="http://www.loul.ch/stadtereignisse.htm" >Stadtereignisse</a></p>', 47.489122, 8.212523],
      ['4. Juni 2016', '<h1>Samstag 4. Juni 2016</h1><br><p>Am Samstag 4. Juni findet ein festival-&auml;hnlicher Event statt. <br><br> <img src="http://www.loul.ch/pictures/day1.jpg" alt=">day1" px; LEFT:265px; WIDTH:150px; HEIGHT:100px" <br> <a href="http://www.loul.ch/stadtereignisse.htm" >Stadtereignisse</a></p>', 47.479122, 8.265313],
      ['Interventionen', '<h1>Interventionen</h1><p>Die SuS arbeiten w&auml;hrend mehrerern Wochen an verschiedenen Projekten. <br><br> <iframe src="https://player.vimeo.com/video/153269021" width="400" height="224" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/153269021">Voicetrument - by Lilian Beidler</a> from <a href="https://vimeo.com/user17367156">Lilian Beidler</a> on <a href="https://vimeo.com">Vimeo</a>.</p></p>', 47.484122, 8.205313]
    ];




    
    
    var icons = [
'http://www.loul.ch/pictures/pfeil1.png',
'http://www.loul.ch/pictures/pfeil2.png',
'http://www.loul.ch/pictures/pfeil3.png',
'http://www.loul.ch/pictures/pfeil1.png',
'http://www.loul.ch/pictures/pfeil2.png',
'http://www.loul.ch/pictures/pfeil3.png'
    ]
    var iconsLength = icons.length;




// POSITIONING OF MAP ZOOM

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(47.479122, 8.207313),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });




// STILISIERUNG DER MAP

  var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -30 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});





// INFOWINDOWS

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 400
    });

    var markers = new Array();
    
    var iconCounter = 0;
    
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
       /*  title: locations[i][0],  */   
        map: map,
        visible: true,
        icon: icons[iconCounter]
      });

      markers.push(marker);

   // event handler
   function onClickHandler (e) {

        var i = 0, marker;
        var visible = e.target.checked; // show if checked, otherwise hide

        console.log('updating markers');
       
        while (marker = markers[i++]) {
            marker.setVisible(visible); // maps API hide call
        }
    }

    // bind handler to checkbox. 
    document.getElementById('myCheckbox').onchange = onClickHandler;
      
          
      

// CLICK (Allow each marker to have an info window)
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][1]);
          infowindow.open(map, marker);
        }
      })(marker, i));
 
 
 
// MOUSEOVER      
  google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));   
  
  
  
  
  
  








  
 
   
  
  
  
      
         

      
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= iconsLength) {
      	iconCounter = 0;
      }
    }

    
    
  </script> 
</body>
</html>
Post Views: 2

Related posts

1 comment

Comments are closed.